Question

我有2个文本元素，当鼠标悬停在它们的中间时，我需要触发两个鼠标悬停事件。这是我的代码：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

当鼠标进入2个元素的重叠区域时，我想触发两个转换。第二个div转换正在运行，但第一个转换不起作用。看起来鼠标悬停事件并没有通过＆＃34;落在＆＃34;。那么如何触发两者呢？

Answer 1

这样做：

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

将您的两个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 个答案: