简体   繁体   中英

show images when hover on link

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM