Обмен контента в отдельном div при наведении - PullRequest
Новая
       10

Обмен контента в отдельном div при наведении

0 голосов
/ 07 июня 2010

Я чувствую, что это должно работать: 

   $(".module .one").hover(function() {
     $("#one").addClass('red');
   });

По сути, я скрываю всех .children "#viewport при загрузке (который #one является), а затем, когда отдельный элемент находится в ( конкретно # 1.

Основная идея - это окно с переменным содержимым, где когда миниатюра или что-то, что я вставляю в модули, меняет содержимое, отображаемое в области просмотра. Что-то я делаю не так?

Вот мой полный JS: 

<script type="text/javascript">
 $(document).ready(function() {
  $(".module .caption").hide();
  $("#viewport").children().hide();
  $(".module").hover(function() {
     $(this).find(".caption").slideDown().end().siblings('.module').addClass('under');
   },function() {
     $(this).find(".caption").slideUp().end().siblings('.module').removeClass('under');   
   });
   $(".module .one").hover(function() {
     $("#one").addClass('red');
   });
 });
</script>

Вот разметка: 

<div id="viewport">
  <div id="one">FIRST ONE CONTENT</div><!-- end #one -->
  <div id="two">SECOND ONE CONTENT</div><!-- end #two -->
  <div id="three">THIRD ONE CONTENT</div><!-- end #three -->
  <div id="four">FOURTH ONE CONTENT</div><!-- end #four -->
</div><!-- end #viewport -->

    <div class="module span-1 one">
  <div class="inside">HOVER</div><!-- end .inside -->
    <h1>TITLE</h1>
    <div class="caption down">
      <p>Caption ipsum lorem dolor ipsum lorem dolor ipsum lorem dolor ipsum lorem dolor</p>
    </div><!-- end .caption -->
</div><!-- end .module -->

    <div class="module span-1 two">
  <div class="inside">HOVER</div><!-- end .inside -->
    <h1>TITLE</h1>
    <div class="caption down">
      <p>Caption ipsum lorem dolor ipsum lorem dolor ipsum lorem dolor ipsum lorem dolor</p>
    </div><!-- end .caption -->
</div><!-- end .module -->

Большая функция наведения в середине предназначена для некоторых необычных эффектов ролловера, которые модули будут выполнять сами, но для этих целей я просто хочу выяснить, почему я не могу добавить класс к отдельному элементу при наведении другого. Буду рад некоторой помощи / совету!

Ответы [ 2 ]

0 голосов
/ 07 июня 2010

Вы имеете в виду: 

 $(".module.one").hover(function() {

Если классы находятся в одном и том же элементе dom, между ними не должно быть пробелов. Пробел между классами будет означать, что первый является родителем, а второй - его дочерним.

0 голосов
/ 07 июня 2010

$("#viewport #one").addClass('red'); ссылается на элемент управления с двумя именами? Должно ли это быть;

$(".viewport .one").addClass('red'); * * 1005

редактировать

Я только что попробовал это, и это сработало;

$ ( "viewport.one.") AddClass ( 'красный');.

Вам необходимо удалить пробел между двумя классами.

...