CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
dsamardjiev
dsamardjiev

Reputation: 400

Bootstrap 3 tabs hover styling issue

I am having an issue "combining" these 2 hover styles to perform together, if anyone could take a look would be great.

http://jsfiddle.net/H8vUW/

I need these hovers:

.services-icon:hover {
color: #fff;
cursor: pointer;
}

.services-icon-holder:hover {
background: #272727;
cursor: pointer;
}

To activate when the user hovers over each tab name as well (design, eshop, social, etc)

Also I made it possible for the icon to turn white on hover of the circle by increasing the height and width of the icon, but this is a little janky to me, for example when you move your mouse over just the beginning of the circle the icon doesnt turn white!

Here is an example of the active and hover: http://aliensix.com/lightningbolt/example.jpg

Active would be with arrow, hover without arrow.

Upvotes: 1

Views: 530

Answers (1)

Lokesh Suthar
Lokesh Suthar

Reputation: 3202

Here FIDDLE.

You have to trigger both css on holder's hover. When you hover over icon, this automatically triggers the parent's hover too.

.services-icon-holder:hover {
    background: #272727;
    cursor: pointer;
    width: 60px;
    height: 60px;
}

.services-icon-holder:hover .services-icon {
    color: #fff;
    cursor: pointer;
}

Upvotes: 1

Related Questions