Hover jquery problem - How to hover different object? [closed]

Question

I want when someone hover cite it will automatically add css: margin-top: 20 px to main wrapper

here is my code that I added to site but it doesnt work.

<script>
$("cite").hover(
function () {
$(this).find('#main-wrapper').css('margin-top', '20px');
},
function () {
$(this).find('#main-wrapper').css('margin-top', '0px');
}
);
</script>

Answer 1

.parents() is the selector which you need to use instead of find.

find selector will try to find the element which is child of current selector. But I think #main-wrapper must be the parent of your content.

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

If we begin at item A, we can find its ancestors:

$('li.item-a').parents().css('background-color', 'red');

The result of this call is a red background for the level-2 list, item II, and the level-1 list (and on up the DOM tree all the way to the element).

See some more examples here