Jquery Div Hover изменить другой Div Class - PullRequest
Новая
       6

Jquery Div Hover изменить другой Div Class

0 голосов
/ 11 декабря 2010

Я пытаюсь заставить один div изменить свой класс при наведении курсора на div контейнера.Ниже приведен код. Структура выглядит следующим образом: 

Div Container

   Top Div

   Middle Div

   Bottom Div

(End Div Container)

Теперь то, что я хочу, это при наведении курсора на контейнер. Я хочу, чтобы нижний div добавил класс с именем "fboto", который изменяет / добавляет фонизображение к этому div.

Ниже приведен мой текущий код, использующий jquery, однако, похоже, он ничего не делает. 

<script>
$("#fbot").hover(
  function () {
    $(this).addClass("fboto");
  }

);


</script>



<!-- fullbox container -->
<div id="fbox">
<div id="ftop"></div> <!-- top of fullbox -->



<!-- middle of fullbox -->
<div id="fmid">

</div>
<!-- end middle of fullbox -->



<div id="fbot"></div> <!-- bottom of fullbox -->
</div>
<!-- end fullbox container -->

Ответы [ 3 ]

1 голос
/ 11 декабря 2010

Я собрал для тебя jsfiddle здесь .

как сказал @charliegriefer - убедитесь, что у вас включен jQuery и определен css для .fboto.

Возможно, я неправильно понял, о чем вы спрашивали, поэтому я обновил свой jsfiddle. Я думаю, что @Felix Kling прав - вы просто пропустили $(function(){...}); - который в основном является методом jquery onload.

0 голосов
/ 11 декабря 2010

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

$ (document) .ready (function () {

}

см. Ниже HTML-код:

Заголовок

Body

Нижний колонтитул

0 голосов
/ 11 декабря 2010

Вы должны поместить свой код jQuery в $(function() {...}), чтобы он выполнялся после загрузки всего DOM. Вы, вероятно, также хотите удалить класс после зависания: 

$(function() {
    $("#fbot").hover(function () {
        $(this).addClass("fboto");
    },
    function () {
        $(this).removeClass("fboto");
    });
});

(Читайте о функции .ready() - я только что представил часто используемый ярлык)

Кроме того, вы сказали, что хотите добавить класс в нижний колонтитул, когда его контейнер div наведен. Так будет ли добавлен этот класс, если "top div" находится в поиске? Если это так, вызовите hover для контейнера div: 

$("#fbox").hover(function () {
    $("#fbot").addClass("fboto");
},
function () {
    $("#fbot").removeClass("fboto");
});

Если нет, вы можете использовать события mouseover и mouseout: 

$("#fbox").mouseover(function(e) {
    if(e.target == this) {
        $("#fbot").addClass("fboto");
    }
}).mouseout(function(e) {
    if(e.target == this) {
        $("#fbot").removeClass('fboto');
    }
});

Обновление:

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

CSS

Я думаю это потому, что селектор идентификатора имеет более высокий приоритет, чем селектор класса (потому что он более конкретен). Попробуйте изменить свой CSS на: 

#fbot.fboto {
   /*...*/
}

Update2: И, кроме того, margin, width и т. Д. В обоих стилях абсолютно одинаковы, и хотя фоновые изображения имеют разные имена, само изображение в точности совпадает здесь и здесь ).
Так что, если бы вы все сделали правильно, вы бы не увидели разницы!

...