Форум

Shuryga · #1 (**permalink**) 30.09.2015, 12:53

Ребят такая тема.
есть див в нем много дивов и блоков и ссылок с разными вложенностями. и есть второй блок который к нему прижат.

предподожем выглядит так:

<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' и попадаем на любой дочерний блок то он закрывает этот див. но как мне сделать что он не закрывал. не перечеслять же все классы дочерних блоков.

ksa · #2 (**permalink**) 30.09.2015, 13:27

Сообщение от Shuryga

убираем мышку с блока 'parent-block-one' делаем ему

display:none

.
но если мы мышку убрали но попали на блок 'parent-block-two' тогда нечего не делаем

Как вариант:
- при уходе с parent-block-one запускаем setTimeout()? который и будет его прятать
- при попадании на parent-block-two убиваем этот setTimeout()

Shuryga · #3 (**permalink**) 30.09.2015, 15:29

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

caetus · #4 (**permalink**) 01.10.2015, 22:58

проверь x и y ))))
с dom не очень хорошо знаком )))

andrey3681 · #5 (**permalink**) 27.12.2016, 21:03

Может не в тему, помогите пожалуйста

Отображаются звездочки рейтинга пользователя, при наведении курсора содержимое блока с id edit_user_rating меняется на пустые звездочки с class span_rating. При клике на звездочку берется data rating и дальше будет обрабатываться.

А если курсор убрать из блока содержимое блока вернется (звездочки с рейтингом)

Если курсор завести сверху, то click не работает

https://jsfiddle.net/Andrey_Vitovtov/q6qtd84L/1/

andrey3681 · #6 (**permalink**) 28.12.2016, 15:13

https://jsfiddle.net/Andrey_Vitovtov/q6qtd84L/1/

рони · #7 (**permalink**) 28.12.2016, 16:02

andrey3681,
может готовое взять?
Код звезд для рейтинга

andrey3681 · #8 (**permalink**) 28.12.2016, 16:18

рони,
Можно и готовое взять! Но хотелось бы узнать в чем проблема в вышеприведенном коде, почему "так работает".
Тем более на странице предполагается много таких "звездных рейтингов"

рони · #9 (**permalink**) 28.12.2016, 17:49

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>

Форум

Справочник

Discord чат

Курсы javascript