冲突的悬停伪类

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,它没有用。

以上是关于冲突的悬停伪类的主要内容,如果未能解决你的问题,请参考以下文章

悬停/鼠标悬停时播放音频,可能没有 jQuery 吗?

css鼠标悬停伪类

为啥悬停伪类会覆盖活动伪类

用于离开悬停的 CSS 伪类

jQuery设置另一个项目的css“颜色”元素覆盖了它的悬停伪类

找出一个元素是不是定义了 CSS“悬停”伪类? [复制]