Menu
I have a div that looks like a speech bubble. The main div is the bubble and the :before is the arrow. What I want to do, is when you rollover :hover the DIV in CSS, it will also change the :before.
Here's my code:
.sidebar_image_box_newsfeed_user_info_comments {
color: #ffffff;
background-color: #2f2f2e;
text-decoration: none;
-webkit-transition-property: background-color, color, text-decoration;
-webkit-transition-duration: 0.5s, 0.5s, 0.5s;
}
.sidebar_image_box_newsfeed_user_info_comments:hover {
background-color: #3b3b3b;
color: #f3f3f3;
text-decoration: underline;
}
.sidebar_image_box_newsfeed_user_info_comments:before {
content:""; position:absolute;
bottom:-6px; right:0;
border-width:0 0 6px 6px;
border-style:solid;
border-color:transparent #2f2f2e;
text-decoration: none;
-webkit-transition-property: background-color, color, text-decoration;
-webkit-transition-duration: 0.5s, 0.5s, 0.5s;
}
287
In order to position the text in over the <div>, you need to assign position: relative to the parent <div> and assign position: absolute to the child <div> element. Now the container is aligned for locating the child <div> to bottom-right assign bottom: 0 and right: 0 .
#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.
You can apply :hover styles to any renderable element on a page. IE6 only supports that pseudo-class on links though.
You can simply use the CSS background-image property in combination with the :hover pseudo-class to replace or change the image on mouseover.
.sidebar_image_box_newsfeed_user_info_comments:hover:before {
content: "I am new";
}
jsFiddle.
130
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
