冲突的悬停伪类
Posted
技术标签:
【中文标题】冲突的悬停伪类【英文标题】:Conflicting Hover Pseudo Classes 【发布时间】:2019-02-04 23:39:31 【问题描述】:我有一种情况,我正在使用悬停伪类修改元素,无论是在其父级悬停时还是悬停时。不幸的是,它们有一个冲突的属性(两者都试图定义属性transform
),这就是为什么——我假设——当按钮悬停但光标改变时缩放不起作用。有没有只使用 CSS 的解决方法?
body
overflow: hidden;
#action-panel
align-items: center;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
padding: 20px 20px 20px 20px;
position: absolute;
right: 0;
transform: translateY(-50%);
top: 50%;
#action-panel:hover .action-button
opacity: 1;
transform: translateX(0);
.action-button
background-color: lightblue;
border-radius: 25px;
height: 50px;
margin-bottom: 20px;
opacity: 0;
transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
transform: translateX(calc(100% + 20px));
width: 50px;
.action-button:hover
cursor: pointer;
transform: translateX(0) scale(1.2);
.action-button span
font-size: 30px;
left: 50%;
position: relative;
transform: translate(-50%, -50%);
top: 50%;
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div id="action-panel">
<div class="action-button"><span class="material-icons">3d_rotation</span></div>
<div class="action-button"><span class="material-icons">compare_arrows</span></div>
<div class="action-button"></div>
</div>
注意:
如果你不能从代码中看出,你需要将光标移动到右边缘的中间才能看到我描述的效果。
【问题讨论】:
【参考方案1】:通过在其前添加#action-panel
增加了以下样式的特异性。在您的代码中,父级的悬停样式覆盖了子级的悬停样式。
#action-panel .action-button:hover
cursor: pointer;
transform: translateX(0) scale(1.2);
body
overflow: hidden;
#action-panel
align-items: center;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
padding: 20px 20px 20px 20px;
position: absolute;
right: 0;
transform: translateY(-50%);
top: 50%;
#action-panel:hover .action-button
opacity: 1;
transform: translateX(0);
.action-button
background-color: lightblue;
border-radius: 25px;
height: 50px;
margin-bottom: 20px;
opacity: 0;
transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
transform: translateX(calc(100% + 20px));
width: 50px;
#action-panel .action-button:hover
cursor: pointer;
transform: translateX(0) scale(1.2);
.action-button span
font-size: 30px;
left: 50%;
position: relative;
transform: translate(-50%, -50%);
top: 50%;
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div id="action-panel">
<div class="action-button"><span class="material-icons">3d_rotation</span></div>
<div class="action-button"><span class="material-icons">compare_arrows</span></div>
<div class="action-button"></div>
</div>
【讨论】:
哇,我真的试过了,但是我在#action-panel:hover .action-button
之前定义了#action-panel .action-button:hover
,它没有用。以上是关于冲突的悬停伪类的主要内容,如果未能解决你的问题,请参考以下文章