CSS鼠标悬停失败

Question

I have 2 text element, and when mouse hover the middle of them, I need both mouse hover events to be triggered. 我有2个文本元素，当鼠标悬停在其中时，我需要触发两个鼠标悬停事件。 This is my code: 这是我的代码：

 div { position: absolute; } .div1 { display: block; background: red; -webkit-transition: left 2s; transition: left 2s; left: 10px; } .div2 { display: block; background: green; transition: left 2s; left: 50px; } .div1:hover { left: 100px; } .div2:hover { left: 0px; }

 <div class="div1">paifjopweijfopaiwjef</div> <div class="div2">fpaowiejfoaweafjweoi</div>

When mouse enter the overlap region of the 2 elements, I want to trigger both transitions. 当鼠标进入两个元素的重叠区域时，我想触发两个过渡。 The second div transition is working, but the first one doesnt work. 第二个div转换有效，但第一个无效。 It seems the mouse hover event does not "fall through". 似乎鼠标悬停事件不会“掉线”。 So how can I trigger both? 那么我怎么能同时触发两者呢？

Answer 1

Do it like this: 像这样做：

 div { position: absolute; } .div1 { display: block; background: red; -webkit-transition: left 2s; transition: left 2s; left: 10px; } .div2 { display: block; background: green; transition: left 2s; left: 50px; } .parent:hover .div1{ left: 100px; } .parent:hover .div2{ left: 0px; }

 <div class="parent"> <div class="div1">paifjopweijfopaiwjef</div> <div class="div2">fpaowiejfoaweafjweoi</div> </div>

Answer 2

Put your both of your div elements in yet another div and detect :hover on the parent as: 将您的两个div元素都放在另一个div并在父级上将:hover检测为：

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    position: absolute;
}
.div1 {
    display: block;
    background: red;
    -webkit-transition: left 2s; 
    transition: left 2s;
    left: 10px;
}
.div2 {
    display: block;

    background: green;
    transition: left 2s;
    left: 50px;
}

div.parent:hover .div2 {
    left: 0px;
}
div.parent:hover .div1 {
    left:100px;
}
</style>
</head>
<body>
<div class="parent">
    <div class="div1">paifjopweijfopaiwjef</div>
    <div class="div2">fpaowiejfoaweafjweoi</div>
</div>

</body>
</html>

CSS鼠标悬停失败

问题描述

2 个解决方案

解决方案1
0 已采纳 2016-01-25 02:32:14

解决方案2
0 2016-01-25 02:33:35

CSS鼠标悬停失败

问题描述

2 个解决方案

解决方案1 0 已采纳 2016-01-25 02:32:14

解决方案2 0 2016-01-25 02:33:35

解决方案1
0 已采纳 2016-01-25 02:32:14

解决方案2
0 2016-01-25 02:33:35