JQuery: Добавление класса для ребенка Элемента

HTML:JQuery: Добавление класса для ребенка Элемента

<div class="cell-container"> 
    <img src="image.png" class="thumbnail" /> 
</div>

CSS:

.hover { 
    background-color: silver; 
} 
.hover-image { 
    border: 1px solid #000; 
}

JQuery:

$(".cell-container").mouseover(function() { 
    $(this).addClass("hover"); 
}); 

$(".cell-container").mouseout(function() { 
    $(this).removeClass("hover"); 
});

В основном я хочу ДИВ cell-container, чтобы выделить выделенный фон onmouseover. Но также добавьте границу к <img>, содержащемуся внутри. Как я могу это достичь?

источник

2011-12-26 Aaron

изменить свойство CSS, которое вы использовали 'border-color', просто:' border' и взгляните на ответы –

Почему бы просто не сделать это в CSS?

div.cell-container:hover { 
    background-color: silver; 
} 

div.cell-container:hover img.thumbnail { 
    border: 1px solid #000; 
}

источник

2011-12-26 22:50:05

+1 для показа, насколько это просто с CSS. : P – Purag

Не могу поверить, что я забыл, что вы можете применить: hover в CSS haha. Благодарю. – Aaron

+1 Отличный способ сделать это только с CSS. Почему я думал об этом? – Neel

btw $.hover обеспечивает как мышь, так и мышь.

$(".cell-container").hover(function() { 
    $(this).addClass("hover"); 
    $(this).children('img').addClass('hover-image'); 
}, function() { 
    $(this).removeClass("hover"); 
    $(this).children('img').removeClass('hover-image'); 
});

источник

2011-12-26 22:48:33

Не нужно использовать '$ (this)' дважды. – Purag

true, но я считаю, что это более читаемо. –

$(".cell-container").hover(function(){ // using hover for shorter syntax 
    $(this) 
     .addClass("hover") // add hover class on mouseover 
     .find("img") // select the child image 
      .addClass("hover-image"); // add hover class 
}, function(){ // mouseout function 
    $(this) 
     .removeClass("hover") // remove hover class 
     .find("img") // select the child image again 
      .removeClass("hover-image"); // remove hover class 
});

Подробнее о hover()here.

источник

2011-12-26 22:49:25 Purag

+1 для честной конкуренции;) (и, конечно, правильный пример) –

DEMO

$(".cell-container").mouseover(function() { 
    $(this).addClass("hover").find('img').addClass('hover-image'); 
}); 

$(".cell-container").mouseout(function() { 
    $(this).removeClass("hover").find('img').removeClass('hover-image'); 
});

И вы должны изменить CSS:

.hover-image { 
    border: 1px solid #000; 
}

источник

2011-12-26 22:50:38

+1 для указания ошибки свойства границы. – Purag

$(".cell-container").hover(
    function() { 
    $(this).addClass("hover"); 
    $(this).children("img").addClass("img-hover"); 
    }, 
    function() { 
    $(this).removeClass("hover"); 
    $(this).children("img").removeClass("img-hover"); 
    } 
); 



.hover-image { 
    border: 1px solid #000; 
}

источник

2011-12-26 22:51:17

Как насчет:

.cell-container:hover 
{ 
    background-color: silver; 
} 

.cell-container:hover img 
{ 
    border: 1px solid #000; 
}

только css.

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

источник

2011-12-26 22:51:19

JQuery: Добавление класса для ребенка Элемента

ответ

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