在父级悬停时更改img src

Question

我有以下html

<div class="custom text-center threeBox ofsted">
  <a class="ofsted" title="ofsted report" href="http://reports.ofsted.gov.uk/">
    <img class="text-center ofstedLogo" src="images/ofsted_good_transparent.png" alt="ofsted good rating">
    <h3>Ofsted</h3>
    </a>
</div>

我编写了以下jquery，它在悬停时交换背景颜色：

    $(".threeBox a").hover(
        function(){ // Mouse Over
            $(this).parent().addClass("swapBg");
        },
        function(){ // Mouse Out
            $(this).parent().removeClass("swapBg");
        }
    );

这很好，但我需要将悬停时的img.ofstedLogo src交换为“OFSTED_img.ofstedLogo_logo.jpg”。我尝试了几次对jQuery代码的更改，但都无法让它正常工作。有什么想法吗？

Answer 1

您可以使用find()获取用于更改图像源的img和attr()。

$(".threeBox a").hover(
        function(){ // Mouse Over
            $(this).parent().addClass("swapBg").find('img').attr('src','OFSTED_good_logo.jpg');
        },
        function(){ // Mouse Out
            $(this).parent().removeClass("swapBg").find('img').attr('src','images/ofsted_good_transparent.png');
        }
    );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="custom text-center threeBox ofsted">
  <a class="ofsted" title="ofsted report" href="http://reports.ofsted.gov.uk/">
    <img class="text-center ofstedLogo" src="images/ofsted_good_transparent.png" alt="ofsted good rating">
    <h3>Ofsted</h3>
    </a>
</div>

​

Answer 2

使用attr()

$(".threeBox a").hover(
        function(){ // Mouse Over
            $(this).parent().addClass("swapBg");
            $(this).find('img').attr('src', 'images/OFSTED_good_logo.jpg');
        },
        function(){ // Mouse Out
            $(this).parent().removeClass("swapBg");
            $(this).find('img').attr('src', 'images/ofsted_good_transparent.png');
        }
    );

Answer 3

这将完成以下工作：

$(this).children('.ofstedLogo').attr('src', 'yourimagehere.png');

请参阅attr