在父节点悬停时更改img src
Change img src when on hover of parent
我有以下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。ofsted_good_logo src悬停到'OFSTED_good_logo.jpg'。我尝试了几次更改jQuery代码,但不能让它工作。有什么想法吗?
您可以使用 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>
Use 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');
}
);
这样就可以了:
$(this).children('.ofstedLogo').attr('src', 'yourimagehere.png');
<<p>看到strong> attr 使用.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");
}
);
有几种方法可以用图形实现这种效果。查看这里的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');
}
);
或jQuery CSS类互换
.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 background image方法。
相关文章:
- Javascript:使用绝对路径设置img src
- 图像可以从源<img src=""/>.TEXT可以在没有javascript的情况下从外部
- 插入“;img src"在javascript中
- 从二维数组中获取img src和img维度,并在body中显示
- 在不发出请求的情况下设置img src
- Jquery/Javascript使用IF/ELSE语句更改img SRC
- 使用JQuery从包含A href值中设置*all*IMG-src值
- Django,HTML,JS:<img src=“#">可以在HTML中工作,但不能在JS文件中工作
- Img-src只通过javascript更改一次
- 正则表达式使链接可点击(仅在“href”而不是“img src”中)
- 交换 img src 或显示/隐藏多个图像是否更快
- 如果有办法在 N 秒内加载未触发,则有没有办法设置 img src
- img src 在 Firefox 和 IE 的 jQuery 脚本中没有更改
- 如何从弹簧控制器方法更新html img src
- onload 不会在 Firefox 中使用 createObjectURL img.src 触发
- img src 属性在为空时返回页面的 URL
- EmberJS config prod img src url
- Jquery-如何在悬停时更改img src
- writeln img src将数据提交到外部系统-Firefox和IE挂起
- 使用jQuery禁用img src等于特定值时的href