悬停在上方时不触发过渡

Question

当我尝试在容器内进行立方体转换时，触发器div 悬停在上面，但它没有触发转换。但是，如果我用不是类或 id 的东西替换触发器的 id，让我们说 body 它可以工作！当我再次将其切换为具有类或 id 的东西时，它就会停止工作！

https://codepen.io/anon/pen/PEwoXb

pre {
background-color: cornflowerblue;
color: white;
margin: 5px auto 5px auto;
width: 50%;
padding: 5px;
}
.trans-box-holder {
display: block;
background: #ffffff;
height: 250px;
border: 1px cornflowerblue solid;
}
.trans-box {
display: inline-block;
background: pink;
width: 100px;
height: 100px;
}
#trans_box_1 {
transition: transform 300ms ease-in-out 0s;
}
/* If you swap out #pre_opacity for body it works for some reason! */
#pre_opacity:hover #trans_box_1 {
transform: translate(200px, 150px) rotate(20deg);
}

<pre id="pre_opacity">
.element {
transition: opacity 300ms ease-in-out 1s;
}
</pre>
<div class="trans-box-holder">
<div class="trans-box" id="trans_box_1"></div>
</div>

Answer 1

使用~来定位它

pre {
background-color: cornflowerblue;
color: white;
margin: 5px auto 5px auto;
width: 50%;
padding: 5px;
}
.trans-box-holder {
display: block;
background: #ffffff;
height: 250px;
border: 1px cornflowerblue solid;
}
.trans-box {
display: inline-block;
background: pink;
width: 100px;
height: 100px;
}
#trans_box_1 {
transition: transform 300ms ease-in-out 0s;
}
/* If you swap out #pre_opacity for body it works for some reason! */
#pre_opacity:hover ~ .trans-box-holder #trans_box_1 {
transform: translate(200px, 150px) rotate(20deg);
}
#pre_opacity:hover{
cursor: pointer;
}

<p class="example"></p>
<!-- The trigger -->
<pre id="pre_opacity">
.element {
transition: opacity 300ms ease-in-out 1s;
}
</pre>
<div class="trans-box-holder">
<div class="trans-box" id="trans_box_1"></div>
</div>

#trans_box_1 是容器的同级。使用~目标定位父目标之后的任何内容，在这种情况下，这些目标可能是pre或#pre_opacity或pre#pre_opacity

为了更好地解释，我还放置了一个example标签作为<p class="example"></p>，您还可以像这样定位悬停效果.example:hover ~ .trans-box-holder #trans_box_1因为目标仍然在父<p>标签之后。

CSS 选择器参考

Answer 2

Jquery会让你的生活更轻松

---

$('#pre_opacity').hover(function() {
$('#trans_box_1').addClass('transClass');
}, function() {
$('#trans_box_1').removeClass('transClass');
});

pre {
background-color: cornflowerblue;
color: white;
margin: 5px auto 5px auto;
width: 50%;
padding: 5px;
}
.trans-box-holder {
display: block;
background: #ffffff;
height: 250px;
border: 1px cornflowerblue solid;
}
.trans-box {
display: inline-block;
background: pink;
width: 100px;
height: 100px;
}
#trans_box_1 {
transition: transform 300ms ease-in-out 0s;
}
/* If you swap out #pre_opacity for body it works for some reason! */
.transClass {
transform: translate(200px, 150px) rotate(20deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<pre id="pre_opacity">
.element {
transition: opacity 300ms ease-in-out 1s;
}
</pre>
<div class="trans-box-holder">
<div class="trans-box" id="trans_box_1"></div>
</div>

Answer 3

它适用于身体的原因是，你有 css：

#pre_opacity:hover #trans_box_1 {
transform: translate(200px, 150px) rotate(20deg);
}

这意味着，当且仅当您的孩子在 Div(或其他一些 HTML 标签)中具有 ID #trans_box_1 且 ID 为 #pre_opacity 时，它将适用。

当您将 #pre_opacity 替换为 body 时，上述条件将过去，悬停将起作用。

要使其正常工作，您需要添加同级选择器">+"或">~">

你的CSS会是这样的：

#pre_opacity:hover + .trans-box-holder #trans_box_1 {
transform: translate(200px, 150px) rotate(20deg);
}

这是工作小提琴：https://jsfiddle.net/kmm2q6y4/

有关更多同级选择器，请查看此内容：https://css-tricks.com/child-and-sibling-selectors/

Answer 4

问： "当我尝试在容器内进行立方体过渡时，当 触发器div 悬停在上面，但它不会触发转换。...">

一个： 多维数据集未转换的原因是，您正在使用的触发元素 (#pre_opacity) 不是要转换的目标元素 (#trans_box_1 .trans-box) 的父元素。

您可以将 ：hover 伪类添加到目标元素的父元素(#body 或 .trans-box-holder)，以便在悬停任一元素时，多维数据集将转换。

例如：

.trans-box-holder:hover .trans_box {
transform: translate(200px, 150px) rotate(20deg);
}

编辑： Noopur Dabhi 和 Ylama 使用波浪号和加号选择器有更好的解决方案。

Answer 5

更改 ：

#pre_opacity:hover #trans_box_1 {

自：

#pre_opacity:hover + .trans-box-holder #trans_box_1 {

pre {
background-color: cornflowerblue;
color: white;
margin: 5px auto 5px auto;
width: 50%;
padding: 5px;
}
.trans-box-holder {
display: block;
background: #ffffff;
height: 250px;
border: 1px cornflowerblue solid;
}
.trans-box {
display: inline-block;
background: pink;
width: 100px;
height: 100px;
}
#trans_box_1 {
transition: transform 300ms ease-in-out 0s;
}
/* If you swap out #pre_opacity for body it works for some reason! */
#pre_opacity:hover + .trans-box-holder #trans_box_1 {
transform: translate(200px, 150px) rotate(20deg);
}

<!-- The trigger -->
<pre id="pre_opacity">
.element {
transition: opacity 300ms ease-in-out 1s;
}
</pre>
<div class="trans-box-holder">
<div class="trans-box" id="trans_box_1"></div>
</div>