簡體   English   中英

嘗試使用jQuery懸停替換圖片

[英]Trying to replace image on hover using jQuery

我正在嘗試使用jQuery更改圖像的顏色,我通過在父元素的懸停元素上替換圖像來做到這一點。

我正在為其中的幾個執行此操作,因此我使用:nth-​​child選擇器來指示哪個將生效,我將在此處發布代碼示例,但是實際代碼中還有更多元素。

問題是懸停時什么也沒有發生,在此先感謝您的幫助-非常感謝。

jQuery的

<script type="text/javascript">
    jQuery( document ).ready(function() {
    jQuery( ".top-icons a:nth-child(1)" ).hover(function() {
        jQuery('img.icon').attr('src', function(i, val) {
            return val.replace(/\.jpgjQuery/,'http://www.example.com/wp-content/uploads/fst-buyer.png');
        });
    });
});
</script>

HTML

<div class="top-icons cs-element cs-animate" style="opacity: 1; top: 0px;">     

        <span class="full-line"><!-- --></span>

        <a href="http://www.example.com/mortgages/first-time-buyers/" class="icon1 fitem">
            <img src="http://www.example.com/wp-content/themes/thestory-child/images/icons/line.png" class="iline">
            <img src="http://www.example.com/wp-content/themes/thestory-child/images/icons/fst-buyer.png" class="icon">
            <p>First Time Buyer</p>
        </a>        

</div>

給您的圖片一個ID,這樣更容易:

HTML:

<div class="top-icons cs-element cs-animate" style="opacity: 1; top: 0px;">

  <span class="full-line"><!-- --></span>

  <a href="http://www.example.com/mortgages/first-time-buyers/" class="icon1 fitem">
    <img src="http://www.example.com/wp-content/themes/thestory-child/images/icons/line.png" class="iline" id="myfirstImage">
    <img src="http://www.example.com/wp-content/themes/thestory-child/images/icons/fst-buyer.png" class="icon" id="mysecondImage">
    <p>First Time Buyer</p>
  </a>

</div>

現在只需執行以下操作:

jQuery(document).ready(function() {
    jQuery("#myfirstImage").hover(function() {
      jQuery(this).attr('src', 'https://www.google.it/images/srpr/logo11w.png');
    });
});

這是與jQuery。

Jsfiddle演示

css還有另一種方法,您可以使用圖像作為元素的背景:

HTML:

<div class="top-icons cs-element cs-animate" style="opacity: 1; top: 0px;">
      <span class="iline" id="myfirstImage"></span>
    <p>First Time Buyer</p>

</div>

CSS:

.iline{
  background: #ffffff url("http://www.w3schools.com/images/w3schools.png") no-repeat;
  display: block;
  height: 150px;
}
.iline:hover{
     background-image: url("https://www.google.it/images/srpr/logo11w.png");
}

Jsfiddle演示

為此,使用JQuery似乎有些矯。過正。

我建議使用CSS:hover選擇器並更改background-image屬性。

這是您可以使用:hover可以做的相當詳盡的指南

http://www.corelangs.com/css/box/hover.html

如果您不希望使用CSS方式。 那正在使用:hover選擇器改變懸停的背景。 我有另一種使用JavaScript的方式

DEMO

HTML

        <span class="full-line"><!-- --></span>

        <a href="http://www.example.com/mortgages/first-time-buyers/" class="icon1 fitem">
            <img src="http://www.queness.com/resources/images/png/apple_ex.png" class="iline" />
            <p>First Time Buyer</p>
        </a>        

</div>

JQuery的/ JS

$("img").hover(function () {
    $("img").attr("src", "http://www.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211810004.png");
}, function () {
    $("img").attr("src", "http://www.queness.com/resources/images/png/apple_ex.png");
});

注意:使用CSS時,您無權更改img src,但只有在您需要更改background-image:url()時,它才具有功能。 懸停。 如果您想使用img標簽,我不建議您使用CSS方式。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM