Question

我想获得一个徽标名称“ Thrive”。然后在悬停/鼠标上将字母更改为“ T”。当mouseleave更改回“ Thrive”时。

如果有人可以帮助，那就太好了。这可以通过Jquery和CSS来完成。谢谢。

我尝试使用jQuery使用徽标图像.fadeToggle（）来实现，它正在切换两个徽标图像。图像看起来不太好，这就是为什么我需要刻字方面的帮助，而我却不怎么做？

与下面的.fadeToggle（）一起使用的代码。

<div class="logos">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php theme_prefix_the_custom_logo()?></a>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img class="hide" src="https://www.example.com/foldername/t-logo.png"></a>
</div>

jQuery(document).ready(function () {
    jQuery('.logos').hover(function(){
        jQuery(this).find("img:last-child").fadeToggle(500);
    });
});

在鼠标悬停/输入徽标字/字母时，仅将第一个字母更改为单个字母，在鼠标离开时，字母再次更改为完整的单词

Answer 1

<div class="logos">
   <a href="http://www.google.com"><span>T</span><span class="hideIt">hrive</span></a>
</div>

$(".logos").on("mouseover",function(){
    $(this).find(".hideIt").hide()
});

$(".logos").on("mouseout",function(){
    $(this).find(".hideIt").show()
})

Fiddle

我会让你弄清楚如何使字母看起来漂亮

Answer 2

尝试：

<!DOCTYPE html>
<html>
<head>
<style>
#logo{
margin:0px auto;
}
.text::before { 
content: "Thrive";
}
#logo:hover .text::before{
content: "T";
}
</style>
</head>
<body>
<span id="logo"><p class="text"></p></span>
</body>
</html>

jsfiddle中的

代码：change title letters

使用字母更改悬停/鼠标上的徽标字母。在mouseleave上更改回原始单词/字母

2 个答案: