mouseover c с блока
Ребят такая тема.
есть див в нем много дивов и блоков и ссылок с разными вложенностями. и есть второй блок который к нему прижат. предподожем выглядит так:
<div class='parent-block-one'>
<div class='children-block-one'></div>
<div class='children-block-two'>
<a href = ''>12</a>
<a href = ''>2</a>
<a href = ''>14</a>
<div class = 'block-z'>
<span></span>
</div>
</div>
</div>
<div class='parent-block-two'></div>
задача следущая убираем мышку с блока 'parent-block-one' делаем ему display:none. но если мы мышку убрали но попали на блок 'parent-block-two' тогда нечего не делаем реализовал так
$('.parent-block-one').mouseout(function(e){
if($( e.relatedTarget ).attr('class')!='parent-block-two')
{
$(this).css('display','none');
}
});
но в таком случае если мы водим по блоку 'parent-block-one' и попадаем на любой дочерний блок то он закрывает этот див. но как мне сделать что он не закрывал. не перечеслять же все классы дочерних блоков. |
Цитата:
- при уходе с parent-block-one запускаем setTimeout()? который и будет его прятать - при попадании на parent-block-two убиваем этот setTimeout() |
проблема в том что пока мы ползаем по этому блоку мышкой, мы можем навести на дочерний блок (относительно блока parent-block-one). и тогда он скроется а мне надо что б он оставался
|
проверь x и y ))))
с dom не очень хорошо знаком ))) |
Может не в тему, помогите пожалуйста
Отображаются звездочки рейтинга пользователя, при наведении курсора содержимое блока с id edit_user_rating меняется на пустые звездочки с class span_rating. При клике на звездочку берется data rating и дальше будет обрабатываться. А если курсор убрать из блока содержимое блока вернется (звездочки с рейтингом) Если курсор завести сверху, то click не работает https://jsfiddle.net/Andrey_Vitovtov/q6qtd84L/1/ |
|
|
рони,
Можно и готовое взять! Но хотелось бы узнать в чем проблема в вышеприведенном коде, почему "так работает". Тем более на странице предполагается много таких "звездных рейтингов" |
рейтинг звёздочками
andrey3681,
скорее всего mouseenter не срабатывает, и менять html на который всё завязано на каждый чих, не особо разумно. вариант близкий к вашему (из вашего и нашего :) )
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.edit_user_rating{
text-align:center;
width:200px;
background:#000;
height:50px;
}
.rating_star{
display:inline-block;
transition:0.2s;
color:#737373;
}
.rating_star>span{
position:relative;
font-size:25px;
height:0.1px;
transition:0.2s;
cursor:pointer;
}
.rating_star:hover>span:before,.rating_star>span.star_select:before{
content:"\2605";
position:absolute;
color:#FEDF69;
transition:0.2s;
}
.rating_star>span:before,.rating_star:hover>span:hover~span:before{
transition:0s;
color:transparent;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function () {
$('.edit_user_rating').on('click', '.rating_star span', function (event) {
event.preventDefault();
var parent = $(this).parent().addClass('select')
var $span = parent.find('span').removeClass('star_select');
var rating = $span.index(this);
$span.slice(0,++rating).addClass('star_select');
alert(rating);
})
})
</script>
</head>
<body>
<div class="edit_user_rating">
<div class="rating_star">
<span class="star_select">☆</span><span class="star_select">☆</span><span>☆</span><span >☆</span><span>☆</span>
</div>
</div>
<br>
<div class="edit_user_rating">
<div class="rating_star">
<span>☆</span><span>☆</span><span>☆</span><span >☆</span><span>☆</span>
</div>
</div>
<br>
<div class="edit_user_rating">
<div class="rating_star">
<span class="star_select">☆</span><span class="star_select">☆</span><span class="star_select">☆</span><span >☆</span><span>☆</span>
</div>
</div>
<br>
</body>
</html>
|
| Часовой пояс GMT +3, время: 13:44. |