Question

我有一个div是盒子和一个＆＃39; p＆＃39;不透明度设置为0的元素。当我将鼠标悬停在div上时，我想要＆＃39; p＆＃39;元素不透明度更改为1.我有以下代码。它的外观适合我但不起作用。我无法弄清楚它的问题。有人能帮我吗。提前谢谢。

HTML：

<p class="se">Hover over the div element below</p>
 <div class="box"></div>

的CSS：

.se{
position: relative;
color:red;
opacity:0;
}

.se{
-webkit-transition: opacity 2s;
transition: opacity 2s;
} 
.box{
position: relative;
left: 400px;
width: 100px;
height: 100px;
background: red;  
}

box:hover + .se{
opacity:0;
}

jsFiddle http://jsfiddle.net/2f1k5yq4/

Answer 1

CSS选择器 +

任何元素是前一个元素的下一个兄弟（即：   同一父母的下一个孩子）

＆＃13;

.box {
  position: relative;
  left: 400px;
  width: 100px;
  height: 100px;
  background: red;
}
.se {
  color: red;
  opacity: 0;
  position: relative;
  transition: 1s linear;
}
.box:hover + .se {
  opacity: 1;
}

＆＃13;

<div class="parent">
  <div class="child">
    <div class="box"></div>
    <p class="se">Hover over the div element below</p>
  </div>
</div>

＆＃13;

Answer 2

这实际上只是CSS的烦人问题。我更喜欢使用Javascript，特别是如果你已经在你的网站上加载了jQuery。

但是，也就是说，这可以在CSS中完成。我假设您只想显示/隐藏元素，因此我将display用于示例而非opacity，因此请根据需要进行修改以使用转换。

您遇到的第一个问题是box:hover而不是.box.hover。第二个问题有点烦人。 Abhitalks是正确的+，相邻的兄弟选择器，只选择下一个兄弟，所以你不能让div上面的文字显示它。但是，如果您切换订单，将div移到文本上方，则可以正常工作。如果你愿意的话，你可以使用一些聪明的定位，浮动等，以使它们的外观顺序与它们在标记中的顺序不同。

.se{
  display: none
}

.box{
  width: 100px;
  height: 100px;
  background: red;  
}

.box:hover + .se{
  display: block;
}

<div class="box"></div> 
<p class="se">Hover over the div element below</p>

在另一个元素上悬停时触发元素的转换

2 个答案: