Question

当我将鼠标悬停在其他地方时希望能够更改一个框的属性时，我有两个不同的框。

我认为如果我在同一个容器中同时拥有这两个盒子，那就像我在snippet here.上看到的一样这是我的html和css：

＆＃13;

.first {
  color: blue;
  background: black;
  width: 299px;
}
.first:hover + .second {
  background: red;
  color: white;
}
.second {
  color: red;
  background: black;
  width: 300px;
  margin-left: 10px;
}
.container {
  display: flex;
}

＆＃13;

<div class="container">
  <div class="first">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam delectus quo corporis, n
  </div>
  <div class="second">
    Lorem ipsum dolor sit amet, consectetur adipisicing e et magnam rem, doloribus libero quas numquam esse in culpa!
  </div>
</div>

＆＃13;

但如果盒子不在同一个容器中，怎么能做同样的事呢？

提前致谢。

Answer 1

如果您使用display: inline-block，则可以删除容器的使用，但因为您在容器类上使用display: flex，所以您将无法获得子项（第一个和第二个div）的优势）拉伸以填充容器的高度。您可以使用固定高度将它们保持在相同的高度。

.first{
  color: blue;
  background: black;
  width: 299px;

  display: inline-block;
}
.first:hover + .second {
  background: red;
  color: white;
}
.second{
  color: red;
  display: inline-block;
  background: black;
  width: 300px;
  margin-left: 10px;
}

<div class="first">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam delectus quo corporis, n
  </div>
  <div class="second">
  Lorem ipsum dolor sit amet, consectetur adipisicing e et magnam rem, doloribus libero quas numquam esse in culpa!
  </div>

Answer 2

（编辑后）

使用Jquery：使用背景颜色创建一个新类，它将与Jquery一起添加，并在鼠标离开div时删除。

代码:(不要忘记添加jquery）

$('div.one').hover(function(){
     $('div.two').toggleClass('three');
});

检查一下： https://jsfiddle.net/wnszbhj3/1/

悬停属性不适用于来自不同容器的div

2 个答案: