Question

我试图搜索的人，但我无法理解任何答案的解释，所以我们走了。我有三个imgs（指向facebook，twitter和Instagram的链接），当光标在她上方时，我想专注于img。它可以工作，但仅限于第一张图片。有什么提示吗？

这里是代码：

HTML：

<div class="eight columns img-footer">
    <img src="img/fb.png" class="img" onMouseOver="focaImg(event.type)" onMouseOut="focaImg(event.type)">
    <img src="img/twitter.png" class="img" onMouseOver="focaImg(event.type)" onMouseOut="focaImg(event.type)">
    <img src="img/insta.png" class="img" onMouseOver="focaImg(event.type)" onMouseOut="focaImg(event.type)">
</div>

JavaScript的：

function focaImg(e){
    var img = document.querySelector(".img");

    if(e == "mouseover"){
        img.style.opacity = "1";

        img.focus();
    }else{
        img.style.opacity = "0.5";
    }
}

Answer 1

为什么不使用CSS：悬停选择器？

.img {
    opacity:0.5;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}
.img:hover {
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

您可以在jsfiddle here中看到一个示例，并在W3Schools.com了解有关CSS图像透明度的更多信息。

如何关注具有相同类的imgs

1 个答案: