如何使伪元素的悬停效果？ [英] How to make a hover effect for pseudo elements?

问题描述

我有这个设置：

 < div id =button> Button< / div> 
  

这是CSS：

  #button {
 color：#fff; 
 display：block; 
 height：25px; 
 margin：0 10px; 
 padding：10px; 
 text-indent：20px; 
 width：12％; 
} 
 
 #button：before {
 background-color：blue; 
 content：; 
 display：block; 
 height：25px; 
 width：25px; 
} 
  

有一种方法给伪元素一个悬停效果，如 #button：before：hover {...} 并且也可以获取伪元素来响应另一个元素悬停，如下所示： #button：hover #button：before {...} ？ CSS只会很好，但是jQuery也很好。

解决方案

你可以改变伪元素父级：

JSFiddle DEMO

  #button：before {
 background-color：blue; 
 content：; 
 display：block; 
 height：25px; 
 width：25px; 
} 
 
 #button：hover：before {
 background-color：red; 
} 
  

  #button {display：块; height：25px; margin：0 10px; padding：10px; text-indent：20px; width：12％;}＃button：before {background-color：blue; content：;显示：block; height：25px; width：25px;}＃button：hover：before {background-color：red;}  

 < div id =button> Button< / div>  

$ b

I have a this setup:

<div id="button">Button</div>

and this for CSS:

#button {
    color: #fff;
    display: block;
    height: 25px;
    margin: 0 10px;
    padding: 10px;
    text-indent: 20px;
    width: 12%;
}

#button:before {
    background-color: blue;
    content: "";
    display: block;
    height: 25px;
    width: 25px;
}

Is there a way to give the pseudo element a hover effect such as #button:before:hover {...} and is it also possible to get the pseudo element to hover in response to another element being hovered like so: #button:hover #button:before {...}? CSS only would be nice, but also jQuery is fine too.

解决方案

You can change the pseudo-element based on hover of the parent:

JSFiddle DEMO

#button:before {
    background-color: blue;
    content: "";
    display: block;
    height: 25px;
    width: 25px;
}

#button:hover:before {
    background-color: red;
}

#button {    display: block;
    height: 25px;
    margin: 0 10px;
    padding: 10px;
    text-indent: 20px;
    width: 12%;}

#button:before { background-color: blue;
    content: "";
    display: block;
    height: 25px;
    width: 25px;}

#button:hover:before { background-color: red;}

<div id="button">Button</div>

这篇关于如何使伪元素的悬停效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！