Перестановка содержание в отдельном DIV на парении

Question

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

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

В основном я прячусь все .children из «#viewport на нагрузке (которая #one есть), а затем, когда отдельный (в этом случае .module .one) Я хочу что-то изменить в #viewport, в частности #one.

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

Он ре мои полные 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 --> 

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

Answer 1

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

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

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

Answer 2

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

$(".viewport .one").addClass('red');?

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

Я просто попытался это, и она работала;

$ (". Viewport.one"). AddClass ('red');

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