Как сделать появление одного элемента при наведении на другой элемент?

Question

[nepster-web]

Есть вот такой html код:

<ul class="team">
<li>
    <div class="hover-info">
        <div class="popover top">
            <div class="arrow"></div>
            <div class="popover-content">
                <strong class="name">Вася</strong>
                <span class="post">FRONT-END development</span>
            </div>
        </div>
    </div>
    <img src="images/team/1.png" alt="" />
</li>
</ul>

Класс .hover-info изначально скрыт (display: none). Его нужно показывать при наведении именно на картинку, тоесть при наведении на область изображения (), а не на область списка (li).

Возможно ли так сделать без js ?

Answer 1

[Виталий Киренков]

Да, просто поменяйте их местами.
img:hover + .hover-info { display: block;}

Comments

[nepster-web]

true story, спасибо.

[Виталий Киренков]

Нзч

[Дмитрий Ермолаев]

вообще это слишком частный случай, не всегда так получится

[Виталий Киренков]

@iusfof тут вопрос и стоит в частном случае.

[Дмитрий Ермолаев]

@DeLaVega то, что вы предложили это костыль

[Виталий Киренков]

@iusfof www.w3schools.com/cssref/css_selectors.asp
воу, воу... вы документацию то хоть почитайте.

[Виталий Киренков]

@iusfof www.w3.org/TR/CSS2/selector.html

[Виталий Киренков]

@iusfof неразумно использовать js, там где можно обойтись одним ксс-ом.

[Дмитрий Ермолаев]

@DeLaVega ) я про то, что менять структуру html это не разумно, если можно ее сохранить применив js. и я опять повторю - это частный случай.

к тому же проще было сделать применение стилей при наведении на li, в таком случае даже при ховере на срабатывали бы стили codepen.io/iusfof/pen/zpBwc

[Юрий Лобанов]

@iusfof если не секрет, в чем заключается костыльность метода и чем js менее костыльный? Писать теперь такие минифункции ради каждого хавера? Грамотный разработчик заранее продумает структуру html с учетом всего, что можно организовать без js. И если это не было сделано сразу, то первым делом попробует поменять структуру, и только если это невозможно уже сделать, то применит js.

[Дмитрий Ермолаев]

@iiil
- допустим может случится так, что будет готовая хтмл структура, которую поменять нельзя это раз (причина по которой я предложил js).
- потом может случится так, что элементы будут находится на разных уровнях это два (причина по которой я считаю данный вариант костылем, хотя костылем называть некорректно, он бы просто не сработал, если бы структура была другой).
- используя js можно организовать взаимодействие элементов которые находятся хоть в противоположных концах страницы это три.
- я описал куда более разумный вариант css без изменения структуры html - codepen.io/iusfof/pen/zpBwc - это четыре.

"Грамотный разработчик заранее продумает структуру html с учетом всего, что можно организовать без js" - ну а в данном случае человек не продумал это заранее и мое предложение было исходя из того, что структуру поменять нельзя, хотя мое предложение в свете 4-го пункта становится сомнительным.

сам я так же предпочел бы не использовать js, если это было бы возможно

Answer 2

[Дмитрий Ермолаев]

более универсальное решение хотя и более заморочистое

html:

<div>
  <div class="block1"></div>
</div>
<div>
  <div class="block2"></div>
</div>

css:

.block1 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.block2 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  position: absolute;
  left: 200px;
  top: 10px;
}

.block2.when_block1_hover {
  background-color: #333;
}

js + jQuery:

$(function(){
  $('.block1').hover(function(){
    $('.block2').addClass('when_block1_hover');
  }, function(){
    $('.block2').removeClass('when_block1_hover');
  })
});

тоже самое на codepen

Comments

[Виталий Киренков]

Если уж и пишите говнокод, то пишите его хотя бы покороче...

$('.block1').hover(function(){
$('.block2').toggleClass('when_block1_hover');
})

[Дмитрий Ермолаев]

@DeLaVega спорно, как-то работал с svg, там toggleClass() при ховере не всегда корректно менял классы

[Дмитрий Ермолаев]

@DeLaVega хотя я наврал, там вообще по другому меняются классы, через .attr()

[nepster-web]

Js конечно хорошо, то использовать его для такого нерекоммендовано. Почему ? НУ потому, что хорошой сайт должен работать и с выключенным js на клиенте. Сейча это мало где нужно, но тем не менее. + Зачем использовать JS там где действительно можно обойтись CSS, собственно за этим и придумывают постоянные модули в CSS. Уже нет смысла писать простую анимацию на js, когда жто достигается с помощью CSS.

[nepster-web]

Решение работчее, но это шаг назад!

[Дмитрий Ермолаев]

@nepster09 "НУ потому, что хорошой сайт должен работать и с выключенным js на клиенте" - абсолютно согласен

[nepster-web]

@iusfof спасибо, пометик как решение, если кто столкнется, будет выбирать.