如何专注于具有相同 类 的 img

Question

伙计们，我试图搜索，但我无法理解任何答案解释，所以我们开始吧。我有三个 img（链接到 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 :hover 选择器？

.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, and read more about CSS image transparency over at W3Schools.com。