html - 首先在悬停时触发两个 Div？

Question

我有一个包含动画 (.animation) 的 div 和另一个仅包含背景图像 (.image) 的 div。现在我想使用另一个 div(.start) 触发这两个 div。但不知何故，我不知道该怎么做。

html

<div class="start">

< /div">

CSS

.start{

width:87px;
height:189px;
position:absolute; 
float: left;
margin-top: 477px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 20px;
background-color: green;

}

.start:hover~.animation,.start:hover~.name



.animation
{
width:200px;
height:200px;
position:absolute; 
float: left;
margin-top: 100px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 20px;
background-color: red;
....

}
.image
{
width:30px;
height:300px;
position:absolute; 
float: left;
margin-top: 100px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 20px;
background-color: green;

}

Answer 1

使 .animation 和 .image 默认不可见:

.animation, .image {
    display: none;
}

然后，只要悬停在 .start 上，您就必须显示它们。

CSS方式

使用你自己的技术:

.start:hover~.animation, .start:hover~.image {
    display: initial;
}

JSFiddle 演示:http://jsfiddle.net/vas4hyrj/

虽然仅如果 .animation 和 .image 放在 .start 之后这将起作用

>

JQuery方式

$(".start").hover(function() {
    //Show the divs when mouse hovers
    $(".animation, .image").css("display", "initial");
}, function() {
    //Hide divs when mouse stops to hover
    $(".animation, .image").css("display", "none");
});

JSFiddle 演示:http://jsfiddle.net/cw0fgxnt/

无论如何，那个总是有效的；但它使用 JQuery