通过css悬停时更改背景[重复]

Posted 2023-05-08

【中文标题】通过css悬停时更改背景[重复]

【英文标题】：Changing the background when hovering via css [duplicate]

【发布时间】：2015-11-24 05:24:39

【问题描述】：

我在一个圆圈中有一个复选标记，当您将鼠标悬停在它上面时，我希望更改复选标记以及背景。

这里是fiddle

但是，当我检查实际复选标记 stem 和 kick 时，它不再改变。

我试过了

#checkmark_stem:hover~#checkmark_kick 
     background-color:white;
     -webkit-transition: color 300ms, background 500ms, border-color 700ms;
                transition: color 600ms, background 1000ms, border-color 1400ms;


#checkmark_kick:hover~#checkmark_stem 
     background-color:white;
     -webkit-transition: color 300ms, background 500ms, border-color 700ms;
                transition: color 600ms, background 1000ms, border-color 1400ms;


#checkmark_stem:hover~#checkmark_circle 
      background:#526F35;
     border-color:#526F35;
     color:transparent;
     -webkit-transition: color 300ms, background 500ms, border-color 700ms;
                transition: color 600ms, background 1000ms, border-color 1400ms;

但由于某种原因，它只改变了踢球而不改变圆圈，而且看起来有点太复杂和太多的代码行。有没有简单的方法在css中做到这一点？我知道在 JS 中它会很简单。

谢谢！

【问题讨论】：

试试这个 SO 问题：***.com/questions/18813299/…

但那是一个图像，如果我只想使用 css 怎么办？

【参考方案1】：

您想使用 .checkmark:hover 而不是 .checkmark_circle:hover

.checkmark 

    display:inline-block;
    width: 60px;
    height:60px;
    border-radius:50%;
       -ms-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    transform: rotate(45deg);



.checkmark:hover * 
     -webkit-transition: color 300ms, background 500ms, border-color 700ms;
                transition: color 600ms, background 1000ms, border-color 1400ms;    



.checkmark:hover .checkmark_circle 
     background:#526F35;
     border-color:#526F35;
     color:transparent;



.checkmark:hover #checkmark_stem 
     background-color:white; 


.checkmark:hover #checkmark_kick 
     background-color:white;


.checkmark_circle 
    position: absolute;
    width:60px;
    height:60px;
    border-radius:50%;
    left:0;
    top:0;
     border:0.15em solid #939393;


#checkmark_stem 
    content:"";
    position: absolute;
    width:8.19px;
    height:24.55px;
    background-color:#939393;
    left:29.7px;
    top:16.2px;


#checkmark_kick 
    content:"";
    position: absolute;
    width:8.18px;
    height:8.18px;
    background-color:#939393;
    left:22.6px;
    top:32.4px;

这里是fiddle

【讨论】：

谢谢！悬停后的 * 是什么意思？

* 是子元素的通配符。 .checkmark:hover * 会将 -webkit-transition 应用于悬停的 .checkmark 内的每个元素。这样你就只有一次转换，而不是在三个单独的行上。

【参考方案2】：

您应该将悬停条件应用于 .checkmark 类而不是子元素（请参阅http://jsfiddle.net/jLa71sah）

所以不是.checkmark_circle:hover ~#checkmark_stem 做.checkmark:hover #checkmark_stem。