我有问题。我已经使用.trigger:hover .target {} ..进行了有针对性的悬停,但我的问题是它也从.target触发。.
.trigger {
width: 300px;
height: 300px;
background: #444;
position: relative;
}
.target {
position: absolute;
width: 100%;
height: 100%;
background: #111;
transform: translate3d(100%, 0, 0);
}
.trigger:hover .target {
border-radius: 50%;
}
<div class="trigger">
<div class="target"></div>
</div>
示例:https://jsfiddle.net/Ls4ejw60/
如何防止这种情况? ..我已经看到使用.trigger:hover .target {}方法可以完成此操作,但是我还没有弄清楚如何防止它触发目标。
答案 0 :(得分:0)
您可以在.target
上使用pointer-events: none;
:
.trigger {
width: 300px;
height: 300px;
background: #444;
position: relative;
}
.target {
position: absolute;
width: 100%;
height: 100%;
background: #111;
transform: translate3d(100%, 0, 0);
pointer-events: none;
}
.trigger:hover .target {
border-radius: 50%;
}
<div class="trigger">
<div class="target"></div>
</div>
另一种选择是将其移出.trigger
,并使用adjacent sibling combinator (+
),但是您必须明确定义其大小,然后以另一种方式将其放置在触发器旁边(已经在身体上使用了display: flex;
):
body {
display: flex;
}
.trigger, .target {
width: 300px;
height: 300px;
}
.trigger {
background: #444;
position: relative;
}
.target {
background: #111;
}
.trigger:hover + .target {
border-radius: 50%;
}
<div class="trigger"></div>
<div class="target"></div>