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

Question

我有一个div包含一个动画（.animation）和另一个div只包含一个背景图像（.image）。现在我想用另一个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

Answer 2

如果你的元素是.start的第一个兄弟，你可以使用+选择器，否则你将不得不使用jQuery。