隱藏圖像和懸停顯示文本的Jquery

我有以下代碼：隱藏圖像和懸停顯示文本的Jquery

$(".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，我想要隱藏圖像並顯示文本而不是圖像，並將鼠標懸停在外，它會返回以顯示沒有文本的圖像。這是我卡住的地方。圖像變爲文字，但當我不再徘徊時，它會保留在文字上，所以圖像不會回來。

任何人都可以幫忙嗎？

來源

2017-01-23 nTuply

你應該補充一個跨度將文本，並只切換圖像或跨度上懸停 – guradio

@guradio一個例子將極大地幫助:) – nTuply

$(".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>

創建的文本跨度。
切換兩個IMG和跨度相應

來源

2017-01-23 04:07:04 guradio

它可以通過只使用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無論你覺得更舒服。

來源

2017-01-23 04:11:59

你可以簡單地使用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>

來源

2017-01-23 04:14:22

隱藏圖像和懸停顯示文本的Jquery

回答

相關問題