Добавить классы с опрокидыванием Javascript

Я хочу добавить группу классов на вершине изображения, которое появляется только при переходе пользователя.Добавить классы с опрокидыванием Javascript

Пожалуйста, смотрите это как рабочий пример:

http://www.warface.co.uk/clients/warface.co.uk/ (CLICK красная стрелка на верхней)

Вы заметите горизонтальный список изображений и текста, желаемый эффект будет список все изображения и желтый блок с текстом будут эффектом опрокидывания.

CSS

<li><a class="project-thumb"><img src="images/_scroll1s.jpg" alt=""> 
    The London Police</a></li> 
    <li><div class="project-thumb"> 
     <div class="content"> 
      <h2>The London Police</h2></a> 
      <a class="view-project">View Project</a> 
       </div><!--content END --> 
        </div><!--project-thumb END --> 
        </li></ul>

Не могли бы вы, пожалуйста, сообщите о правильной разметки для яваскрипта замены эффекта.

Большое спасибо

источник

2011-01-04 Rob

Вы должен использовать .stop(), когда пользователь наводится на изображение, так что действия не будут поставлены в очередь – Cristy

Я рекомендую использовать библиотеку JavaScript, как JQuery. jQuery делает безумно легким сделать изменение класса в событии зависания.

Добавить jquery в свой тег <head>. Используйте один из Googles CDN:
```
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
```

Добавить что-то вроде этого:

<script> 
$(document).ready(function() { 
    // find the image inside the link with the class project-thumb and add a hover event 
    $("a.project-thumb img").hover(
    function() { 
     // add a class to the closest li. $(this) is the image 
     $(this).closest('li').addClass('theClassYouWantToAdd'); 
    }, 
    function() { 
     $(this).closest('li').removeClass('theClassYouWantToRemove'); 
    } 
); 
}); 
</script>

Документация для события зависания: http://api.jquery.com/hover/

Это должно работать :)

источник

2011-01-04 11:35:13

Большое спасибо за этот Адам, очень ясный и лаконичный именно то, что я искал :) – Rob

Нет проблем. рад помочь. :) –

Добавить классы с опрокидыванием Javascript

ответ

Смежные вопросы