1

I have a div with style="display:none". On mouse hover on a link I want to show it by adding a class with display=block but it is not working.

Improve this question
2
  • Please add the code you tried Commented Dec 26, 2012 at 5:49
  • 4
    An inline style overrides all CSS classes from standard stylesheets (except those applied with !important). Best is to avoid use use of style entirely or use the show()/hide()/toggle() methods. Use the developer tools from your browser to inspect the matching CSS rules and the applied rules. Commented Dec 26, 2012 at 5:50

2 Answers 2

Reset to default
3

you need to use !important in class .Check this awesome answer to see how !important works 

 /*html*/ <div class="first" style="display:none;">sdfirst</div> <div class="second" >second</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ /*jquery*/ $(".second").mouseover(function() { $(".first").addClass("ss"); })​ /*css*/ ​.ss{display:block !important;}​

Specifics on CSS Specificity

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

use this code 

 <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body><div id="main"> Mouse Over (click here for event) <div id="div1" style="display:none">hello how are you</div> </div><script> var i = 0; $('#main').mouseover(function() { $('#div1').css('display','block'); }).mouseout(function(){ $('#div1').css('display','none'); }); </script></body> </html>

for add the you can use

 $('#div1').addClass("className");
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.