Спрятать только выделенный элемент
Здравствуйте. Есть несколько блоков с одинаковым классом
<div class="parent"> <div class="child">...</div> <div class="child">...</div> </div> Хочу при hover скрывать соответственный див
$(".parent").hover(function(){
$(".child").toggleClass("opacity");
});
Но скрываются естественно все дивы.Подскажите как скрыть див на котором стрелка мыши? |
$(".parent div").hover(function(){
$(this).toggleClass("opacity");
});
|
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.opacity {
opacity: 0;
}
.parent div{
cursor: default;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
$(".parent div").hover(function(){
$(this).toggleClass("opacity");
});
});
</script>
</head>
<body>
<div class="parent">
<div class="child">1111</div>
<div class="child">2222</div>
</div>
</body>
</html>
|
<html>
<head>
<style>
.child {
color: #f00;
}
.opacity {
color: #0f0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
$(".parent div").hover(function(){
$(this).toggleClass("opacity");
});
});
</script>
</head>
<body>
<div class="parent">
<div class="child">aaaa</div>
<div class="child">bbbb</div>
</div>
</body>
</html>
Что не работает? |
Цитата:
А второе, у меня скрывается весь блок "parent" |
ureech,
значит у вас иная структура чем вы показали |
Блин, прошу прощения, не правильно сформулировал вопрос. В посте №1 не так
<div class="parent"> <div class="child">...</div> <div class="child">...</div> </div>, а так <div class="parent"> <div class="child">...</div> </div> <div class="parent"> <div class="child">...</div> </div> <div class="parent"> <div class="child">...</div> </div> И соответственно поэтому так у меня и работает. Извиняюсь.В остальном задача прежняя. |
В дальнейшем это дело будет в динамике и в цикле в смарти
{foreach key=tid item=cat from=$list}
<div class="parent">
<div class="child">...</div>
</div>
{/foreach}
$tid принимает значения от 0 и далее, может к этому как то привязать? |
Во первых $(".parent div") означает - получить все элементы div элемента с классом parent. Чего вам и хочется, хотя правильнее будет так:
$(".parent > div") только так $("div .parent") - это означает в неком div получить элемент с классом parent. И в каком это div он у вас находится и с чего бы это работало? Ваше "работает", может быть только так:
$("div.parent > div").hover(function(){
$(this).toggleClass("opacity");
});
ибо просто обращение по классу без указания тега, это поиск всех элементов документа отвечающих этому селектору. Чего делать не рекомендуется. Вам две копии примера показали, они рабочие. PS. Если parent содержит один элемент, то зачем обращаться к child через него? |
Цитата:
Цитата:
|
Если в "parent" помещается только один "child", то измените в примерах селектор на "div.child". Этого будет достаточно. Если бы необходимо было менять стили только "parent child", не затрагивая "child" в других элементах, тогда бы надо было действовать как показывали. Иначе смысла нет в обращении через "parent".
|
Цитата:
|
Внимательно смотрим на html-код! Ваш? По одному элементу, а не по три и более в "parent", правильно?
<html>
<head>
<style>
.child {
color: #f00;
}
.opacity {
color: #0f0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
$("div.child").hover(function(){
$(this).toggleClass("opacity");
});
});
</script>
</head>
<body>
<div class="parent">
<div class="child">aaa</div>
</div>
<div class="parent">
<div class="child">bbb</div>
</div>
<div class="parent">
<div class="child">ccc</div>
</div>
</body>
</html>
Работает? |
ureech,
вам тостаточно css - js тут ненужен |
Цитата:
Цитата:
|
Ну да, CSS. Только о каких "всех" постоянно идет речь, даже после того ка вроде бы один прописан.
|
Но мне нужно hover на "parent", так как на "parent" привязана svg анимация
Ну так оставьте селектор, который вам ранее показывали, в чем проблема? |
Цитата:
|
Заходим на первую страницу поста, смотрим примеры - именно они вам и нужны.
|
Всем спасибо. "Разобрался", код работает в таком виде
$(function(){
$(".parent").hover(function(){
$(this).children('.child').toggleClass('opacity');
});
});
|
| Часовой пояс GMT +3, время: 23:08. |