How to make a hover effect for pseudo elements?
JqueryCssPseudo ElementPseudo ClassJquery Problem Overview
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.
Jquery Solutions
Solution 1 - Jquery
You can change the pseudo-element based on hover of the parent:
#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>
Solution 2 - Jquery
To clarify, you CAN NOT give :hover to a pseudo element. There's no such thing as ::after:hover in CSS as of 2018.
Solution 3 - Jquery
#button:hover:before will change the pseudo-element in response to the button being hovered. If you want to do anything nontrivial to the pseudo-element only, however, you'd be better off putting an actual element into your HTML. Pseudo-elements are rather limited.
While CSS won't let you style elements based on elements that come after them, it is usually possible to rig something with the same basic effect by putting :hover on a parent node, i.e.:
<div id="overbutton">
<div id="buttonbefore"></div>
<div id="button"></div>
</div>
#overbutton {
margin-top: 25px;
position: relative;
}
#buttonbefore {
position: absolute;
background-color: blue;
width: 25px;
height: 25px;
top: -25px;
}
#overbutton:hover #buttonbefore {
// set styles that should apply to buttonbefore on button hover
}
#overbutton:hover #buttonbefore:hover {
// unset styles that should apply on button hover
// set styles that should apply to buttonbefore on buttonbefore hover
}
Solution 4 - Jquery
If its just for design purposes I think its better to create Pseudo-Elements on either side of the Rectangle Box and to keep the HTML as simple as possible:
HTML:
<body>
<div class="tabStyle">Rectangle</div>
</body>
CSS:
.tabStyle {
border-style:solid;
border-color: #D8D8D8;
background : #D8D8D8;
width:200px;
height:93px;
color: #000;
position: relative;
top: 10px;
left: 49px;
text-align:center;
}
.tabStyle:hover {
background : #000;
border-color: #000;
}
.tabStyle:hover::before {
border-color: transparent #000 #000 transparent;
border-style: solid;
border-width: 0px 0px 100px 50px;
}
.tabStyle:hover::after {
border-color: transparent transparent #000 #000;
border-style: solid;
border-width: 0px 50px 100px 0px;
}
.tabStyle::after {
border-color: transparent transparent #D8D8D8 #D8D8D8;
border-style: solid;
border-width: 0px 50px 100px 0px;
position: absolute;
top: -4px;
left:101%;
content:"";
}
.tabStyle::before {
border-color: transparent #D8D8D8 #D8D8D8 transparent;
border-style: solid;
border-width: 0px 0px 100px 50px;
position: absolute;
top: -4px;
right: 101%;
content:"";
}
I've modified the CSS and the result can be seen below: