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.

Krutik Jayswal
  • 3,165
  • 1
  • 15
  • 38
user1929135
  • 31
  • 4
  • Please add the code you tried – Murali Murugesan Dec 26 '12 at 05: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. –  Dec 26 '12 at 05:50

2 Answers2

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

Community
  • 1
  • 1
NullPoiиteя
  • 56,591
  • 22
  • 125
  • 143
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");
Manish Nagar
  • 1,038
  • 7
  • 12