图像悬停的图像

Question

我有一个div，另一个div，都有图像设置为ex：

<div id="image"></div>
<div id="btnPrev"></div>

图像位于按钮prev下方。 - 我正在尝试做的是触发悬停在图像上，然后淡入btnPrev，但是当鼠标进入btnPrev时它会因为离开div id'image'而淡出。

有没有办法'将它们加在一起'，我不能将btnPrev放在'image'中。

Answer 1

你可以包装这些div：

<div class="container">
  <div id="image"></div>
  <div id="btnPrev"></div>
</div>

你的CSS：悬停将在.container：

.container:hover #image {
    /* do something */
}

我意识到你想做jQuery。在这种情况下，选择器将是相同的：$('.container:hover #image')

Answer 2

I cannot place btnPrev inside 'image'.但是，您可以创建一个类。

前：

<div id="image" class="hoverDiv"></div>
<div id="btnPrev" class="hoverDiv"></div>

然后在你的JQuery中你可以说：

$('.hoverDiv').on("hover", function() {

    //Do stuff

});

但是，我确实认为如果你将它们放入一个包含div的内容中它会更好用，因为btnPrev最初不会显示，所以如果你有：

<div id="imageContainer">
    <div id="image" class="hoverDiv"></div>
    <div id="btnPrev" class="hoverDiv"></div>
</div>

然后你的JQuery函数应该如下：

$('#imageContainer').on("hover", function(){
    //do stuff
});

Answer 3

试试这个：

<div id="image"></div>
<div id="btnPrev"></div>

CSS

#image:hover + #btnPrev,
#btnPrev:hover{
    /* Styles here */
}

更新了小提琴：DEMO