Question

我有两个不同的div，在悬停一个div时我试图改变这个div +另一个div的属性（box-shadow）。即在下面的示例中，在div上悬停一对二，一对二和一对都应该添加一个盒子阴影。

我在stackoverflow中找到了一些答案，其中说.div1：hover + .div2，但这似乎不起作用。（Is there any way to hover over one element and affect a different element?）。有没有其他解决方案或我做错了什么？

@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
.container {
  display: block;
  max-width: 100%;
}
.header {
  width: 100%;
  position: absolute;;
  /*border-bottom: 1px solid black;*/
  height: 10%;
  background-color: teal;
  margin: -9px;
  padding-top: 15px;
  box-shadow: 2px 5px 4px #ccc ;
  text-align: center;
  font-size: 20px;
  text-transform: uppercase;
  font-family: sans-serif;
  font: Helvetica;
  color: #ccc

}
.canvas-frame {
  position: absolute;
  left: 30%;
  top: 20%;
  width: 600px;
  height: 400px;
  background: linear-gradient(to left bottom, #2DBE60, #246DE9);
  box-shadow: 3px 3px 5px 2px #ccc;
}
.frame {
  position: absolute;
  left: 30%;
  top: 20%;
  width: 600px;
  height: 400px;
  background: linear-gradient(to left bottom, #2DBE60, #246DE9);
  box-shadow: 3px 3px 5px 2px #ccc;
}
.one-one {
   position: absolute;
   z-index: 0;
   top: 0;
   left: 36px;
   height: 40px;
   width: 20px;
   background: #fff;
  margin-top:30px;
   border-radius: 3px;
   transform: rotate(50deg);
   box-shadow: 0 0 13px 0 rgba(0,0,0,0.2);
 }
 .one-two {
   position: absolute;
   background: #fff;
   height: 100px;
   width: 20px;
   border-radius: 3px;
   margin-top : -20px;
   top: 51px;
   left: 51px;
   z-index: 1;
   box-shadow: 0 0 13px 0 rgba(0,0,0,0.2);
 }
 .zero-one,.zero-two {
   position: absolute;
   z-index: 2;
   top: 50;
   left: 62px ;
   box-sizing: border-box;
   height: 100px;
   width: 100px;
   margin-top : 30px;
   border-radius: 50%;
   border: 24px solid #fff;
   box-shadow: 0 0 13px 0 rgba(0,0,0,0.2);
 }
 .zero-two {
   left: 152px !important;
 }
.overlap-text {
position: absolute;
z-index: 1;
}
.big{
  font-family: sans-serif;
  font: Helvetica;
  font-size: 80px;
  color: #fff;
  text-transform: capitalize;
}
.days{
  position: absolute;
  top: 90px;
  left: 140px;
}
.one-two:hover + .one-one{
  box-shadow: 5px 5px 8px 0 #545050;
  cursor: -webkit-grab;
}
.one-two:active{
  box-shadow: 6px 6px 4px 0 #545050;
  cursor: -webkit-grab;
}
.one-two:hover + .one-one{
  box-shadow: 5px 5px 8px 0 #545050;
  cursor: -webkit-grab;
}
.one-two:active{
  box-shadow: 6px 6px 4px 0 #545050;
  cursor: -webkit-grab;
}

<html>
<title>
100 days Challenge
</title>
<link rel="stylesheet" href="style.css">
<body>
  <div class="container">
  <nav class="header"> css challenge </nav>
  <div class="frame">
  <!-- <canvas class="canvas-frame"> -->
  <!-- <h1 class="overlap-text"> 100 </h1> -->
  <div class="one-one" id="one-one"></div>
  <div class="one-two" id="one-two"></div>
  <div class="zero-one"></div>
  <div class="zero-two"></div>
  <div class="days"><h1 class="big"> days </h1></div>

  <!-- <h2> css challenge </h2> -->
</div>
<!-- </canvas> -->
</div>
</body>
</html>

Answer 1

是的，所以你想使用相邻的选择器+

.one-one:hover + .one-two { box-shadow: 5px 5px 8px 0 #545050; }

认为你是以错误的顺序完成所有

查看这个简单的代码集示例：http://codepen.io/StefanBobrowski/pen/ZeZGmQ

Answer 2

试试这个

<div class="container">
  <nav class="header"> css challenge </nav>
  <div class="frame">
  <!-- <canvas class="canvas-frame"> -->
  <!-- <h1 class="overlap-text"> 100 </h1> -->
  <div class="one-two" id="one-two"></div> <!-- chnage the placement of div -->
   <div class="one-one" id="one-one"></div>
  <div class="zero-one"></div>
  <div class="zero-two"></div>
  <div class="days"><h1 class="big"> days </h1></div>

  <!-- <h2> css challenge </h2> -->
</div>
<!-- </canvas> -->
</div>

<强> CSS

.one-two:hover ~ .one-one{
  box-shadow: 5px 5px 8px 0 #545050;
  cursor: -webkit-grab;
}
.one-two:hover ~ .one-one{
  box-shadow: 5px 5px 8px 0 #545050;
  cursor: -webkit-grab;
}

jsfiddle link of your code

Answer 3

你怎么看待插入一点点jquery？假设div是div #a和div #b，所以通过悬停a来改变b的属性可能看起来像这样（我没有提供你需要的确切示例，但这可能有助于你理解你怎么解决这个问题。）

$(function() {
  $('#a').hover(function() {
    $('#b').css('background-color', 'Gray');
  }, function() {
    // on mouseout, reset the background colour
    $('#b').css('background-color', '');
  });
});

在另一个元素的悬停时更改元素的属性

3 个答案: