CODEWITHSUNDEEP
htmlcsshovermouseover
gsamaras
gsamaras

Reputation: 73444

Hover effect goes out of border

Here is my JSFiddle, where I have a table, where on hover, its rows should change color, like this:

.hover-row:hover {
  background-color: #FFEFC6;
}

However, on the last row, the hover effect will overflow (the wrapper has some radius). Can we do something to prevent that?

I have tried with z-index and/or border-radius, but it will just not have any effect!

Upvotes: 2

Views: 148

Answers (2)

Alex
Alex

Reputation: 8695

You can set overflow: hidden; on .wrap.

Jsfiddle

Upvotes: 3

Cruiser
Cruiser

Reputation: 1616

You aren't seeing results because your :hover class is at the top of your css. It needs to be below your base classes, otherwise cascading rules apply to it. When you move it down you can apply a border radius to it. 

border-radius:10px;

http://jsfiddle.net/q2w4jjyt/23/

However, I would specifically target the Team 6 line with an ID so that Team 5 doesn't get the radius as well and look silly.

Upvotes: 1

Related Questions