隐藏图像和悬停显示文本的Jquery

Question

我有以下代码：

$(".service-link").mouseover(function() { 
 
     $(this).find('img:first').hide(); 
 
     var txt = $(this).attr("data-text"); 
 
     $(this).text(txt); 
 
    }).mouseout(function() { 
 
     $(this).text(); 
 
     $(this).find('img:first').show(); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="servicesNav"> 
 
    <li class="servSep"><a class="service-link" data-text="Name A" href="#"><img id="serv-image-1" src="content/images/serv-1.png" /></a></li> 
 
    <li class="servSep"><a class="service-link" data-text="Name A" href="#"><img id="serv-image-8" src="content/images/serv-8.png" /></a></li> 
 
    <li class="servSep"><a class="service-link" data-text="Name C" href="#"><img id="serv-image-3" src="content/images/serv-3.png" /></a></li> 
 
</ul>

现在我正在努力做到这一点上徘徊每个或li，我想要隐藏图像并显示文本而不是图像，并将鼠标悬停在外，它会返回以显示没有文本的图像。这是我卡住的地方。图像变为文字，但当我不再徘徊时，它会保留在文字上，所以图像不会回来。

任何人都可以帮忙吗？

Answer 1

$(".service-link").mouseover(function() { 
 
    $(this).find('img').toggle(); 
 
    $(this).find('span').toggle(); 
 
}).mouseout(function() { 
 
    $(this).find('img').toggle(); 
 
    $(this).find('span').toggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="servicesNav"> 
 
    <li class="servSep"> 
 
    <a class="service-link" data-text="Name A" href="#"> 
 
     <img id="serv-image-1" src="content/images/serv-1.png" /> 
 
     <span style="display:none">Name A</span> 
 
    </a> 
 
    </li> 
 
    <li class="servSep"> 
 
    <a class="service-link" data-text="Name A" href="#"> 
 
     <img id="serv-image-8" src="content/images/serv-8.png" /> 
 
     <span style="display:none">Name B</span> 
 
    </a> 
 
    </li> 
 
    <li class="servSep"> 
 
    <a class="service-link" data-text="Name C" href="#"> 
 
     <img id="serv-image-3" src="content/images/serv-3.png" /> 
 
     <span style="display:none">Name C</span> 
 
    </a> 
 
    </li> 
 
</ul>

1. 创建的文本跨度。
2. 切换两个IMG和跨度相应

Answer 2

它可以通过只使用CSS来实现。切换父级悬停时的显示属性。

示例代码段：

#servicesNav .servSep span { 
 
    display: none; 
 
} 
 
#servicesNav .servSep:hover span { 
 
    display: inline; 
 
} 
 
#servicesNav .servSep:hover .image-tag { 
 
    display: none; 
 
}

<ul id="servicesNav"> 
 
    <li class="servSep"> 
 
    <a class="service-link" data-text="Name A" href="#"> 
 
     <img id="serv-image-1" class="image-tag" src="content/images/serv-1.png" /> 
 
     <span>SomeText</span> 
 
    </a> 
 
    </li> 
 
    <li class="servSep"> 
 
    <a class="service-link" data-text="Name A" href="#"> 
 
     <img id="serv-image-8" class="image-tag" src="content/images/serv-8.png" /> 
 
     <span>SomeText</span> 
 
    </a> 
 
    </li> 
 
    <li class="servSep"> 
 
    <a class="service-link" data-text="Name C" href="#"> 
 
     <img id="serv-image-3" class="image-tag" src="content/images/serv-3.png" /> 
 
     <span>SomeText</span> 
 
    </a> 
 
    </li> 
 
</ul>

注意：使用jQuery或css无论你觉得更舒服。

Answer 3

你可以简单地使用CSS来做到这一点。 不需要js。

ul li a:hover img { 
 
    display: none 
 
} 
 

 
ul li a:hover span { 
 
    display: block 
 
} 
 

 
ul li a img { 
 
    display: block 
 
} 
 

 
ul li a span { 
 
    display: none 
 
}

<ul id="servicesNav"> 
 
    <li class="servSep"><a class="service-link" data-text="Name A" href="#"><span>Name A</span><img id="serv-image-1" src="content/images/serv-1.png" /></a></li> 
 
    <li class="servSep"><a class="service-link" data-text="Name B" href="#"><span>Name B</span><img id="serv-image-8" src="content/images/serv-8.png" /></a></li> 
 
    <li class="servSep"><a class="service-link" data-text="Name C" href="#"><span>Name C</span><img id="serv-image-3" src="content/images/serv-3.png" /></a></li> 
 
</ul>