Question

我正在尝试使用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>

Answer 1

使用JQuery似乎有点矫枉过正。

我建议使用CSS：hover选择器并更改background-image属性。

以下是您可以使用的完整指南：悬停

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

Answer 2

如果您不想使用css方式。这是在使用悬停选择器改变悬停的背景。我有另一种使用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 方式。

Answer 3

为您的图片提供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 Demo

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 Demo

尝试使用jQuery

3 个答案: