我有以下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,它在a:
的悬停时交换背景颜色 $(".threeBox a").hover(
function(){ // Mouse Over
$(this).parent().addClass("swapBg");
},
function(){ // Mouse Out
$(this).parent().removeClass("swapBg");
}
);
哪个效果很好,但我需要在悬停时将img.ofstedLogo src交换为'OFSTED_good_logo.jpg'。我已尝试对jQuery代码进行了一些更改,但无法使其工作。有什么想法吗?
答案 0 :(得分:4)
您可以使用 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');
}
);
&#13;
<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>
&#13;
答案 1 :(得分: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');
}
);
答案 2 :(得分:2)
答案 3 :(得分:2)
使用.find()
选择图片,使用.attr()
更改src属性:
$(".threeBox a").hover(
function(){ // Mouse Over
$(this).parent().addClass("swapBg");
$(this).find('img.ofstedLogo').attr("src", "images/OFSTED_good_logo.jpg");
},
function(){ // Mouse Out
$(this).parent().removeClass("swapBg");
$(this).find('img.ofstedLogo').attr("src","images/ofsted_good_transparent.png");
}
);
答案 4 :(得分:0)
有几种方法可以通过图形来实现这种效果..请查看这里的jsfiddle示例:
jQuery直接替换图像
$(".twoBox > a").hover(
function(){ // Mouse Over
$(this).find('img:first').attr("src", 'http://blog.modernica.net/wp-content/uploads/2011/12/2-300x300.png');
},
function(){ // Mouse Out
$(this).find('img:first').attr("src", 'http://www.adamcentric.com/wp-content/uploads/2014/09/1-300x300.png');
}
);
OR jQuery CSS class swap
.ofstedLogo2 {
height: 300px;
width:300px;
background-image:url(http://www.adamcentric.com/wp-content/uploads/2014/09/1-300x300.png);
}
.ofstedLogo3 {
height: 300px;
width:300px;
background-image:url(http://blog.modernica.net/wp-content/uploads/2011/12/2-300x300.png);
}
$(".threeBox > a").hover(
function(){ // Mouse Over
$(this).find('div:first').toggleClass("ofstedLogo2");
$(this).find('div:first').toggleClass("ofstedLogo3");
},
function(){ // Mouse Out
$(this).find('div:first').toggleClass("ofstedLogo2");
$(this).find('div:first').toggleClass("ofstedLogo3");
}
);
https://jsfiddle.net/rwdw5u76/
一个使用实际的IMG src替换,另一个使用css背景图像方法代替。