Menu
Below code works fine in ie 9 and doesn't work in any other browser. When I mouse hover on list background should change the color, but it doesn't.
.menunews ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
.menunews a {
display: block;
color: #266CAE;
height: 30px;
background: #ffffff;
border-bottom: 1px solid #ccc;
overflow: hidden;
width: 100%;
height: 2.72em;
line-height: 2.75em;
text-indent: 2.02em;
text-decoration: none;
}
.menunews li a:hover {
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color- stop(47%, #f6f6f6), color-stop(100%, #ededed));
background: -webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
background: -o-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
background: linear-gradient(to bottom, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
color: #266CAE
}<ul style="font-size:12px;">
<li class="menunews">
<a href=""><span style="margin-left:2px;">Hello test</span></a>
</li>
</ul>
886
The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).
You might have linked your stylesheet to your HTML file improperly. Some other CSS in the context of your project may be overriding the piece that you've given here. You might be running into browser compatibility issues with the :hover selector or something else in your code that is breaking the styling.
HTML: Use a container element (like <div>) and add the "tooltip" class to it. When the user mouse over this <div>, it will show the tooltip text. The tooltip text is placed inside an inline element (like <span>) with class="tooltiptext" .
Just like other pseudo-class selectors, the :disabled selector can be chained with other selectors such as :hover , for example, to provide hover styles for disabled elements.
hey actually you made the CSS in some other way that's why browsers doesn't understand your css code so i made some changes in your css and its working fine on all browsers as per your requirement so i hope this will help you.....
ul li.menunews {
border-bottom: 1px solid #ccc;
list-style:none;
height:30px;
}
ul li.menunews a {
display:block;
color:#266CAE;
text-decoration:none;
}
ul li.menunews:hover {
background:#ffffff;
background:-moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color- stop(47%,#f6f6f6), color-stop(100%,#ededed));
background:-webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
background:-o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
background:-ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
background:linear-gradient(to bottom, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );color:#266CAE}
}<ul style="font-size:12px;">
<li class="menunews"><a href="#"><span style="margin-left:2px;">Hello test</span></a></li>
</ul>Define your class in ul instead of li so as to take effect :
<ul class="menunews" style="font-size:12px;"><li ><a href="#" >
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
