I'm having trouble with the :hover effect not working on my .tabs li element. I've tried commenting out my jQuery script, but it still won't apply. Can anyone help me figure out why?
Here's a JSFiddle link for reference: https://jsfiddle.net/qpmg4wzq/
<div id="tabs-container">
<ul class="tabs">
<li class="tab current" data-tab="tab-1">tab 1</li>
<li class="tab" data-tab="tab-2">tab 2</li>
<li class="tab" data-tab="tab-3">tab 3</li>
<li class="tab" data-tab="tab-4">tab 4</li>
</ul>
</div>
#tabs-container {
float: left;
width: 100%;
overflow: hidden;
}
.tabs {
padding: 0px;
list-style: none;
clear: left;
float: left;
left: 50%;
}
.tabs li {
display: block;
float: left;
right: 50%;
margin: 0;
padding: 10px 20px 5px 20px;
cursor: pointer;
font-size: 1.1em;
line-height: 2em;
-webkit-transition: color .2s linear;
-moz-transition: color .2s linear;
-ms-transition: color .2s linear;
-o-transition: color .2s linear;
transition: color .2s linear;
-webkit-transition: background .2s linear;
-moz-transition: background .2s linear;
-ms-transition: background .2s linear;
-o-transition: background .2s linear;
transition: background .2s linear;
}
.tabs li:hover {
background: #88abc2!important;
}
.tabs li.current {
background: #d0e0eb;
color: #49708a;
}
.tab-content {
display: none;
padding: 15px;
line-height: 1.4;
}
.tab-content.current {
display: inherit;
}
If anyone has any insights, I would greatly appreciate it. Thank you.