Question

我有两个div，我想通过悬停第二个来改变第一个颜色。我找到了解决方案，当“徘徊”来到它的css应该改变的目标之前，如果“徘徊”后来怎么办？没有javascript可以做什么？

.box, .box-2 {
  display: block;
  height: 100px;
  width: 100px;
  margin: 20px;
}

.box {
  background-color: red;
}

.box-2 {
  background-color: blue;
}

.box-2:hover + .box {
  background-color: green;
}

<body>
<div class="wrapper"> 
  <div class="box"></div>
  <div class="box-2"></div>
</div>
</body>

Answer 1

解决方案是将视觉顺序颠倒并保持DOM中的顺序，以便您仍然可以使用+选择器。

这是flex的一个例子：

.wrapper {
  display:flex;
  flex-direction:column;
}

.box, .box-2 {
  display: block;
  height: 100px;
  width: 100px;
  margin: 20px;
}

.box {
  background-color: red;
}

.box-2 {
  background-color: blue;
  order:2; /* this will make box-2 goes after */
}

.box-2:hover + .box {
  background-color: green;
}

<body>
<div class="wrapper"> 
  <div class="box-2"></div>
  <div class="box"></div>
</div>
</body>

获得更多想法的一些相关问题：

Is there a "previous sibling" CSS selector?

Previous adjacent sibling selector workaround?

Answer 2

虽然Temani的答案是一项很棒的技巧，但如果您需要使用.wrapper选择器进行双向工作，我会有另一种建议，尽管它有点受欢迎 - 或者因为你的边缘而失败。

如果您检查.wrapper:hover > .box:not(:hover) { background-color: green; }元素上的悬停，则可以在不悬停时为您设置样式，如下所示：

@import url('https://fonts.googleapis.com/css?family=Poiret+One');

a:link {
    text-decoration: none;
}

a:visited {
    color: white;
}

.Nav{
    border:1px solid #ccc;
    border-width:1px 0;
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
    font-family: Poiret One;
}
.Nav li{
    display:inline;
    padding: 40px;
}
.Nav a{
    display:inline-block;
    padding:15px;
}

.Title-Page {
  background-image: url("Images/Campeche.jpg");
  background-size: cover;
  padding: 200px 0 260px 0;
  height: 600px;
  margin: 0;
}

在其后的另一个元素的悬停上更改元素的属性

2 个答案: