Jump to content
  • 0

Поведение :hover у псевдоэлементов


Kelenar
 Share

Question

Есть блок с псевдоэлементом.

При наведении на блок (:hover) - появляется псевдоэлемент.

НО при перемещении курсора с  блока на появившийся псевдоэлемент. Псевдоэлемент не пропадает, а остается пока виден пока на нем наведена мышь. Почему???

http://jsfiddle.net/AYB26/31/

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

position:absolute же убирает элемент из общего потока элементов в документе и он перестает оказывать влияние на расположение соседних элементов.

Не должно же влиять. Или я что то не правильно понимаю?

Link to comment
Share on other sites

  • 0

Именно внутри. Как вложенный span. Поэтому наведение на псевдик == наведение на часть элемента == наведение на элемент.

 

По идее, это можно переопределить, задав псевдику pointer-events: none, но имхо это костыль.

Link to comment
Share on other sites

  • 0

Не спорю, что логичней. Но если вот хочется человеку странного задача требует, есть вот такой извр обходной вариант :)

 

Более интересные варианты иногда получаются, если наоборот, отрабатывать :hover только у псевдиков. Вплоть до чего-то интерактивного вообще без HTML-разметки :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Xandr555
      Добрый день. Размещено 2 блока по 3 изображения, отцентрировано flex, по плану при наведении курсора картинка затемняется, сверху появляется описание. Стили работают как задумано только в Chrome и Opera. В Сафари рамка не всплывает, текст не выравнивается. В IE 11 рамка всплывает, текст не выравнивается. Заранее благодарю.
      <div class="wrapper"> <div class="demo-content"> <div class="part"> <figure class="img-box"> <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample54.jpg> <figcaption><section class="imgone">По Вашему желанию электропроводку можно уложить в ПВХ-короб</section></figcaption> </figure> <figure class="img-box"> <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample73.jpg> <figcaption><section class="imgone">Красиво, эстетично и надежно - наше кредо!</section></figcaption> </figure> <figure class="img-box"> <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample58.jpg> <figcaption><section class="imgone">Такой вариант электропроводки рекомендуем, например, в подсобных постройках</section></figcaption> </figure> </div> </div> </div> <div class="wrapper"> <div class="demo-content"> <div class="part"> <figure class="img-box"> <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample54.jpg> <figcaption><section class="imgone">Вмонтированный в стену электросчетчик делает Вашу квартиру более объемной</section></figcaption> </figure> <figure class="img-box"> <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample73.jpg> <figcaption><section class="imgone">Устанавливайте новые светильники, мы поможем подобрать их по мощности</section></figcaption> </figure> <figure class="img-box"> <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample58.jpg> <figcaption><section class="imgone">Мы устанавливаем розетки и выключатели в любой компоновке</section></figcaption> </figure> </div> </div> </div> *, *:after, *:before { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; } .wrapper{margin:0 auto} .demo-content { text-align: center; } .part{max-height:310px;max-height:100%;display:flex;display:-moz-flex;display: -webkit-flex;justify-content:center} figure.img-box { text-align: center; position: relative; display: inline-block; overflow: hidden; margin: 3px 3px; max-width: 300px; width:100%; background-color:#DCDCDC; -webkit-box-shadow: 0 8px 17px 0 hex(#cccccc), 0 6px 20px 0 hex(#cfcfcf); box-shadow: 0 8px 17px 0 hex(#cccccc), 0 6px 20px 0 hex(#cfcfcf); } figure.img-box * { -webkit-box-sizing: padding-box; box-sizing: padding-box; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } figure.img-box img { max-width: 100%; vertical-align: top; } figure.img-box figcaption { position:absolute; top:0; bottom:0; left:0; right:0; align-items:center; z-index:1; display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; flex-direction:column; -webkit-flex-direction:column; -moz-flex-direction:column; -ms-flex-direction:column; justify-content:center; opacity:0; } figure.img-box:after { border: 8px solid #FF0000; position: absolute; content: ""; display: block; top: 50%; bottom: 50%; left: 0; right: 0; -webkit-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; opacity: 0; } figure.img-box:hover img { opacity:0.2; } figure.img-box:hover:after { top: 0; bottom: 0; opacity: 0.9; } .img-box .imgone { font-family:'Roboto',sans-serif; color:#00008B; font-size:16px; font-weight: 400; margin: 0; padding:0 10px; transform: scale(0); -webkit-transform:scale(0); -ms-transform:scale(0); -webkit-transition: all 1s ease 0s; transition: all 1s ease 0s; -ms-transition: all 1s ease 0s; } .img-box:hover figcaption, .img-box:hover .imgone { transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); opacity: 1; } скриншоты прилагаю



    • By spartak9871
      как применить свойство любому элементу на странице при использовании :hover :active и тд.
      при изменении последовательности блоков и использовании "+" цвет применяется
    • By ShaxaY
      Доброго вечера форумчане . После просмотра уроков верстки, решил самостоятельно сверстать макет (скачать)
      При наведении на .about-team, мета должна выезжать вверх c прозрачным фоном и так-же появляются соц сети, уже несколько часов ломаю голову, но никак не получается сделать все нормально, взглянув на код вы сами сделаете выводы))
      Уважаемые эксперты, просьба: Направьте меня на путь истинный. Как бы вы все это оформили?
      п.с Простите за быдло код
       
      <section class="team center-block-main"> <h2>Meet Us</h2> <div class="about-team"> <img src="image/team-1.jpg"> <p class="meta-info"><span>Jolil Shaheb</span><br>Web Developer <img class="meta-soc" src="image/soc.png"></p> </div> <div class="about-team"> <img src="image/team-1.jpg"> <p class="meta-info"><span>Jolil Shaheb</span><br>Web Developer<img class="meta-soc" src="image/soc.png"></p> </div> <div class="about-team"> <img src="image/team-1.jpg"> <p class="meta-info"><span>Jolil Shaheb</span><br>Web Developer<img class="meta-soc" src="image/soc.png"></p> </div> <div class="about-team"> <img src="image/team-1.jpg"> <p class="meta-info"><span>Jolil Shaheb</span><br>Web Developer<img class="meta-soc" src="image/soc.png"></p> </div> </section>  
      .team{ font-family: 'Roboto', sans-serif; text-align: center; } .team h2{ font-size:1.875em; color:#454546; font-weight: 600; margin-bottom: 30px; } .about-team{ float:left; width:21%; margin-left: 4%; position: relative; font-size:0; text-align: center; } .meta-info{ position: absolute; background: rgba(114,107,101,0.9); padding: 10px 77px; bottom: 0; font-size:14px; color:#fff; font-weight: 300; } .meta-info span{ font-weight: 500; font-size: 18px; } .about-team:hover .meta-info{ background: rgba(29,222,133,0.7); top:0; bottom: 0; left: 0; right:0; padding: 50% 0 0 0; -webkit-transition-duration: .1s; -moz-transition-duration: .1s; -o-transition-duration: .1s; transition-duration: .1s; } .about-team:hover .meta-soc{ display: block; } .meta-soc{ border-top: solid 1px #fff; border-bottom: solid 1px #fff; display: none; } .about-team:first-of-type{ margin-left:0; }  


    • By aqua.77
      Как заставить при наведении мыши на один элемент  применить фон для другого элемента? или альтернативу предложите. https://jsfiddle.net/v662rftm/
    • By Kelenar
      Возможно ли сделать две разные анимации (именно animation) для элемента при наведении на него мышью (:hover) средствами CSS?
      Т.е. навели мышь на элемент сработала первая анимация, убираем мышь срабатывает вторая анимация.
      P.S. transition не позволяет добиться сложных перемещений блоков, поэтому не подходит
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy