CODEWITHSUNDEEP
csspseudo-element
brianm
brianm

Reputation: 11

Link issues using a:hover:after

http://codepen.io/brianmillerkha/pen/adZdwz

In the above pen I've worked on including a few pseudo elements and I'm in over my head. I like that the light blue triangle/play button that shows up on hover, but I'm confused about why the red highlight then goes away when I specifically hover over the triangle. Is there a simple way to have both of those elements show up together?

Here is the CSS for that specific :after element

.container a:hover:after;
content: '\25b6';
font-size: 75px;
color: #7FDBFF;
position: absolute;
display: inline-block;
margin-left: -13%;
margin-top: 8.85%;
opacity: 0.7;
filter: alpha(opacity=7);

Any advice would be very greatly appreciated!

Thank you!

Upvotes: 1

Views: 56

Answers (2)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85575

You have html elements like this:

<a><div></div></a>


+----------------------------------+
| 1 a:hover                        |
|    +--------------+              |
|    |  2 div:hover |              |
|    +--------------+              |
|                                  |
|                                  |
|                                  |
+----------------------------------+

And you're trying to use css like this:

div:hover:after{ } /*red background element*/

Now when you use a:hover:after{} you're no longer accessing div:hover so your red element is lost.

So, what should you do is to add this: a:hover div:after to your div:hover:after ie. like this:

div:hover:after, a:hover div:after{}

Now, when you hover to the a div:after element is shown that means you're now not losing the div:hover:after.

Let's see the updated pen

Upvotes: 1

Jinu Kurian
Jinu Kurian

Reputation: 9416

Well, I updated this code at line number 74 to get what you want. 

.container .mix:hover:after, a:hover .mix:after{
  content: attr(data-myorder)
}

updated PEN

Upvotes: 2

Related Questions