Jquery DOM traversal, TOGGLE CSS PROPERTY

Question

Using Jquery , I want to change the css property 'display:none', from CORRESPONDING {or only underlying to that li tag}class1 to 'display:block', whenever mouse is hovered over Topic1. Any suggestions?

<li class="top"> 
   <a href="#" >Topic1</a>
      <div class="Class 1">
    <div class="class2" style="width:25%"><ul>
           <li><a href="#" Some text1</a></li>
           <li><a href="#" Some text1</a></li>
           <li><a href="#" Some text1</a></li>
                 ...
        </ul></div>
      </div>
</li>
<li class="top"> 
   <a href="#" >Topic2</a>
      <div class="Class 1">
    <div class="class2" style="width:25%"><ul>
           <li><a href="#" Some text2</a></li>
           <li><a href="#" Some text2</a></li>
           <li><a href="#" Some text2</a></li>
                 ...
        </ul></div>
      </div>
</li>

where

.class1 {
    display:none;
    ...
}

Answer 1

Assuming your html is valid(it currently isn't you have some amount of errors in there), the following should do what you need. It will only happen under anchors with the text 'Topic1', assuming that's what you wanted.

​$('a').on('hover', function() {
    $(this).siblings('div').toggleClass("class1");
});