добавление класса с помощью jQuery без отображения эффектов

0

У меня есть HTML, как показано ниже:

<div class="container">
      <!-- Example row of columns -->
      <div class="row">
        <div class="span7">
          <div class="home-image left-image">
            <img class="photography-left-top" src="http://placehold.it/700x440" />
            <p class="image-text_left">Wedditng Photography</p>
          </div>

          <h5>Heading</h5>
        </div>
        <div class="span5">
            <div class="home-image right-image right-image-top">
                <img class="photography-right-top" src="http://placehold.it/400x200" />
                <p class="image-text_right-top">Fashion Photography</p>
          </div>
          <div class="home-image right-image right-image-bottom">
            <img class="photography-right-bottom" src="http://placehold.it/400x200" />
            <p class="image-text_right-bottom">Contact</p>
          </div>

          <h5>Heading</h5>
       </div>

      </div>

 </div>        

И CSS:

.home-image {
    position:relative;
}
.photography-left-top,.photography-right-top,.photography-right-bottom {
    position : absolute;
}
.image-text_left {
    display:none;
    position:absolute;
    width:300px;
    top:200px;;
    left:200px;
    z-index : 100;
    font-weight:bold;
}
.image-text_right-top,.image-text_right-bottom {
    display:none;
    position:absolute;
    width:300px;
    top:100px;
    left:100px;
    z-index : 100;
    font-weight:bold
}
.right-image-bottom {
    margin-top:220px;
    position:relative
}
.right-top {
    position:relative
}
.home-img-hover {
    background:#911717;
}

JS:

$(document).ready(function(){

        $(".left-image").hover(function () {
            $(this).find('.photography-left-top').fadeTo('slow',0);
            $(this).addClass('home-img-hover');
            $('.image-text_left').show();
        },
        function () {
            $(this).find('.photography-left-top').fadeTo('400',1.0);
            $('.image-text_left').hide();
        });

Поскольку addClass('home-img-hover') добавит класс к текущему class я ожидал цвет фона, когда наводил на left-image. Но его отображение белого фона по умолчанию. Зачем?

Образец в JSFiddle

  • 4
    Высота .home-img-hover DIV равна 0
  • 0
    Потому что вы использовали .fadeTo ('slow', 0); означает, что элемент не виден, поэтому вы не можете видеть стили для элемента.
Теги:
class
addclass

2 ответа

2
Лучший ответ

Он делает именно то, что вы ожидаете, вы просто не видите его, потому что .home-image не имеет высоты, потому что все внутри него выводится из нормального потока документов (с position:absolute). Попробуйте присвоить .home-image некоторые размеры, и вы увидите, что я имею в виду:

.home-image {
    position:relative;
    width:400px;
    height:240px;
}

JSFiddle

2

Вот ваша проблема, ваша высота div на самом деле равна 0px.

Просто добавь

height: 240px;
width: 400px;

к .home-image, и вы увидите, что ваш код действительно работает.

См. Обновленный JSFiddle

Ещё вопросы

Сообщество Overcoder
Наверх
Меню