CODEWITHSUNDEEP
csspseudo-element
milk
milk

Reputation: 434

Pseudo element hover Safari issues

I really hope someone can help me with this one.

I have a shape that I'd like to have change background color when hovered over it. I've gotten it to work in all browsers, except Safari.

You can see it here: http://jsfiddle.net/bgLv6L9j/5/ I tried using the following code to make the hover work but it cuts off half the text. I tried adding the dimensions of the shape but that also makes it look wonky. 

.shape:hover::before {
background-color: #245a85;
content: "";
  position:absolute;
  }

I've looked through various other topics with the same issue but can't seem to locate any Safari specific problems (or solutions for that matter).

I'd really appreciate it if someone could quickly take a look and see where I'm going wrong with regard to pseudo elements and getting the background hover to work in Safari.

Upvotes: 1

Views: 1351

Answers (1)

Stickers
Stickers

Reputation: 78676

If you do this:

.shape a {
    position: absolute;
}

Instead of relative It seems that will fix the problem.

http://jsfiddle.net/bgLv6L9j/7/

Edit:

I rewrote it with a much simple code based on yours.

HTML

<a class="shape" href="#">Text</a>

CSS

.shape {
    border: 2px solid crimson;
    border-radius: 5px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 150px;
    height: 75px;
    -moz-transform: perspective(40em) rotatex(-45deg);
    -ms-transform: perspective(40em) rotatex(-45deg);
    -o-transform: perspective(40em) rotatex(-45deg);
    -webkit-transform: perspective(40em) rotatex(-45deg);
    transform: perspective(40em) rotatex(-45deg);
}

.shape:hover {
    background: crimson;
}

That's it. http://jsfiddle.net/8sdqteke/

Upvotes: 2

Related Questions