Question

我正在建立一个网站，我想悬停在某些图像上并让它们显示其他div。

我发现这个JSfiddle效果很好。 http://jsfiddle.net/ZSZQK/

<div id="image"><img src="image.png"/></div>

<div id="hover">Test message</div>

#hover {
    display: none;
}

#image:hover + #hover {
    display: block;
}

只有我需要将我的div分开，这意味着它们不再相邻，就像这样。 http://jsfiddle.net/Z2H66/

<div class="first-container">
    <div class="image"><img src="image.png"/></div>
</div>    

<div class="second-container">
    <div class="hover">Test message</div>
</div>

.hover {
    display: none;
}

.image:hover + .hover {
    display: block;
}

我能使用哪些工具可以做我要问的工作？

另请注意，我将代码更改为类而不是ID，但这并不能阻止它正常工作。我的代码不起作用，因为div hover和image不相邻。

Answer 1

请参阅使用Javascript和jQuery的JSFiddle的修改版本： http://jsfiddle.net/scorchio/ZSZQK/288/

jQuery可以让你轻松处理这样的悬停事件，关键是以下内容：

$(document).ready(function() {
    // Hide on start
    $("#hover").hide();

    // Handle mouse over for image
    $("#image").hover(function() {
            // This one is when the mouse enters
            $("#hover").show(); 
        },
        function() {
            // ...and when it hides.
            $("#hover").hide();
    });
});

Answer 2

嗯，~稍微不那么严格，但这不会对你有所帮助:(

使用纯CSS，我认为这是你能做的最好的事情：

.hover {
    display: none;
}

.first-container:hover ~ .second-container .hover {
    display: block;
}

请参阅this post about css parent selectors（未实施）和this link from one of the answers that has a javascript shim for it。

顺便说一下，与~不同，+是相邻的，但不是紧邻的。

CSS中是否有不相邻的选择器？

2 个答案: