jquery - 如何使用带有少量 img 的类作为 jQuery 的悬停？

Question

我对 html/css/a little of jQuery 中的类有疑问。

这就是我想要实现的目标，但是在用悬停定义类之后，我无法将其用于其他图像，只能用于我编写它的那个图像。我希望你能帮我用 jQuery 解决这个问题。抱歉，我现在的知识还很匮乏。

HTML:

   <div id="gallery">
                <img class="image" src="images/image_14.png" >
                <div class="hover_state">
                    <div class="buttons">
                        <a href="www.xnxx.com" >
                            <img class="behancew" src="images/image_25.png" >
                            <img class="behanceb"  src="images/image_29.png" >
                        </a>
                        <a href="www.redtube.com" >
                            <img class="fullw" src="images/image_26.png" >
                            <img class="fullb"  src="images/image_27.png" >
                        </a>
                    </div>
                </div>
                <img class="image" src="images/image_18.png" >
                <div class="hover_state">
                    <div class="buttons">
                        <a href="#" >
                            <img class="behancew" src="images/image_25.png" >
                            <img class="behanceb"  src="images/image_29.png" >
                        </a>
                        <a href="#" >
                            <img class="fullw" src="images/image_26.png" >
                            <img class="fullb"  src="images/image_27.png" >
                        </a>
                    </div>
                </div>
                    <!-- additional slots
                <img class="image" src="#">
                <img class="image" src="images/image_18.png" >
                <img class="image" src="#"</div>
                <img class="image" src="#">
                    -->
            </div>

CSS:

#gallery {
    width: 982px;
    margin: 0 auto;
}

.image {
    width: 452px;
    height: 242px;
    margin: 12px;
    border: 2px solid gray;
    float: left;
    position: relative;
}

.hover_state {
    width: 452px;
    height: 242px;
    margin: 12px;
    border: 2px solid gray;
    //position: absolute;
    background-color: #20409c;
    opacity: 0;
}

.hover_state:hover {
    opacity: 0.9;
}


.buttons {
    margin-top: 80px;
}

.behancew {
    position:absolute;
    padding: 23px;
}

.behanceb {
    padding: 23px;
}

.behancew:hover {
    opacity: 0;
}

.fullw {
    position:absolute;
    padding: 23px;
}

.fullb {
    padding: 23px;
}

.fullw:hover {
    opacity: 0;
}

jQuery:

$("gallery").hover(
  function () {
    $(this).addClass("hover_state");
  },
  function () {
    $(this).removeClass("hover_state");
  }
);

Answer 1

如果我理解你的问题是你想显示每个 hover_state对于每个 .image .

看看这个 Demo Fiddle

您可能需要包装 <img>和 hover_state使用另一个这样的容器:

<div class="item">
    <img src="http://placehold.it/350x150"/>
    <div class="hover_state"></div>
</div>

然后制作一个显示确切 hover_state 的函数:

$('.item').hover(function(){
    $('.hover_state',this).fadeToggle();
})