Question

当我尝试在触发器div悬停时在容器内部进行立方体转换但是它不会触发转换。但是，如果我用不属于某个类或id的东西换掉触发器的id，就可以说它可以正常运行！我将它切换为具有类或id的东西的那一刻它就会停止工作！

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

Answer 1

使用~

进行定位

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＃trans_box_1是容器的兄弟。在{1}}或~或pre

我还将#pre_opacity标记设为pre#pre_opacity只是为了更好地解释，您也可以将鼠标悬停效果定位为example，因为目标仍在父{{1}之后标签。

CSS Selectors Reference

Answer 2

Jquery将让您的生活更轻松

＆＃13;

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

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

Answer 3

它为身体工作的原因是，你有css：

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

这意味着，当且仅当您在id为#pre_opacity的div（或其他html标记）中有id＃trans_box_1的孩子时才会应用。

当您用body替换#pre_opacity时，上述条件将会通过，并且悬停将起作用。

要使其有效，您需要添加同级选择器“ + ”或“〜”

你将会是这样的：

#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

问：＆＃34;当我尝试在容器内部进行立方体转换时触发器div悬停，但它不会触发转换。 ...＆＃34;

A：多维数据集未转换的原因是您使用的触发元素（#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); }

 <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>

悬停时过渡不会触发

5 个答案: