При наведении курсора мыши добавить границу или рамку-тень для изображения

#html #css

#HTML #css

Вопрос:

Мне нужно добавить рамку или рамку-тень к изображению при наведении курсора мыши на ссылку. при наведении курсора должен отображаться анимированный круг вокруг круглого изображения. Я использую следующий css, но он не работает.

https://codepen.io/anon/pen/mArEoX

 <div class="sub-page-menu-item-w">
  <div class="sub-page-menu-img">
    <img src="http://dummyimage.com/200x200/0066ff/fff" class="sub-page-menu-imgx img-responsive img-circle">
  </div>
  <a href="/location/" class="sub-page-menu-a">Location</a>
</div>

.img-circle{
  border-radius:100%;
}
.sub-page-menu-a:hover ~ .img-circle {
  display: block;
  box-shadow: 0 0 0 14px #B28164 !important;
}
.sub-page-menu-a:hover {
  color:green !important;
  font-size:18px !important;
}

Ответ №1:

Общий селектор родственных элементов ( ~ ) не найдет элементы, которые предшествуют элементу слева от селектора. Чтобы это сработало, вам нужно будет изменить порядок sub-page-menu-a и sub-page-menu-img в вашем HTML.

Однако это все равно не будет работать, поскольку img-circle не является родственным sub-page-menu-a .

Рабочий код:

 .img-circle{
  border-radius:100%;
}
.sub-page-menu-a:hover ~ .sub-page-menu-img .img-circle {
  display: block;
  box-shadow: 0 0 0 14px #B28164 !important;
}
.sub-page-menu-a:hover {
  color:green !important;
  font-size:18px !important;
}

 <div class="sub-page-menu-item-w">
  <a href="/location/" class="sub-page-menu-a">Location</a>
  <div class="sub-page-menu-img">
    <img src="http://dummyimage.com/200x200/0066ff/fff" class="sub-page-menu-imgx img-responsive img-circle">
  </div>
</div>

1. Это не работает, если вы перемещаете привязку после примера div codepen.io/anon/pen/xELEkq

2. Это правильно. Я объяснил, почему это так, в моем ответе. — «Общий селектор родственных элементов (~) не найдет элементы, которые предшествуют элементу слева от селектора »

3. Есть ли способ заставить его работать с помощью CSS, поскольку я не могу переместить ссылку на другой div

4. Нет селектора CSS, который может перемещаться назад по DOM.

5. Вы могли бы добавить :hover к родительскому элементу — codepen.io/anon/pen/RGkGGJ

Ответ №2:

Поскольку предыдущего родственного селектора или родительского селектора нет, мы можем сделать здесь небольшой трюк, используя flexbox и его order свойство.

В приведенном ниже примере привязка находится перед изображением div / img группой в разметке, а затем их порядок меняется, указывая привязку order: 1 и ее родительский элемент display: flex

Кроме того, селектор sibling ~ предназначен для братьев и сестер, а не для дочерних элементов, поэтому он должен быть нацелен на изображение div , которое будет нацелено на img , например .sub-page-menu-a:hover ~ .sub-page-menu-img .img-circle

 .sub-page-menu-item-w {
  display: flex;
  flex-direction: column;
}
.sub-page-menu-item-w a {
  order: 1;
}

.img-circle{
  border-radius:100%;
}
.sub-page-menu-a:hover ~ .sub-page-menu-img .img-circle {
  display: block;
  box-shadow: 0 0 0 14px #B28164 !important;
}
.sub-page-menu-a:hover {
  color:green !important;
  font-size:18px !important;
}

 <div class="sub-page-menu-item-w">
  <a href="/location/" class="sub-page-menu-a">Location</a>
  <div class="sub-page-menu-img">
    <img src="http://dummyimage.com/200x200/0066ff/fff" class="sub-page-menu-imgx img-responsive img-circle">
  </div>
</div>

1. Работает ли это в мобильных браузерах.. Я должен проверить, что это кажется очень хорошим трюком

2. @Learning Да, это так, проверьте этот список поддержки браузера: caniuse.com/#feat=flexbox