I have 3 anchor tag and I want to show each image when hovered over an anchor tag. I attached images and reference website is http://online.wsj.com/home-page?refresh=on
jsexec(2, "var", function() {
var items = dojo.query("#LSWeekend .newsItem li .selectionTarget");
var result = new Array();
var count = 0;
for (var i = 0; i < items.length; i++) {
if (items[i].getElementsByTagName('img').length > 0) {
result[count] = dojo.query("#LSWeekend .newsItem li .selectionTarget")[i].getElementsByTagName('a')[0].getAttribute('href');
count++;
}
}
var dynamics = dojo.query("#LSWeekend .dynamic a");
for (var a = 0; a < dynamics.length; a++) {
dynamics[a].setAttribute('href', result[a]);
}
});
This can be done easily using the css '>' operator. (This is talked about How to change one element while hovering over another )
a > img {
display: none;
}
a:hover > img {
display: block;
}
You can play with it here: http://jsfiddle.net/SAMdroid/VLUGM/1/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.