【问题标题】:On anchor hover add border or box-shadow for image在锚点悬停时为图像添加边框或框阴影
【发布时间】:2016-09-30 13:02:17
【问题描述】:

当我将鼠标悬停在链接上时,我需要为图像添加边框或框阴影。悬停应该在圆形图像周围显示动画圆圈。我正在使用以下 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;
}

【问题讨论】:

    标签: html css


    【解决方案1】:

    一般同级选择器 (~) 不会找到选择器左侧元素之前的元素。要完成这项工作,您必须在 HTML 中切换 sub-page-menu-asub-page-menu-img 的顺序。

    但是,这仍然不起作用,因为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>

    【讨论】:

    • 在 div 示例 codepen.io/anon/pen/xELEkq987654321@ 之后移动锚点将不起作用
    • 没错。我在回答中解释了为什么这是真的。 - "通用兄弟选择器(~)不会找到选择器左侧元素之前的元素"
    • 有没有办法让它通过 CSS 工作,因为我无法将链接移动到另一个 div
    • 没有可以在 DOM 中向后移动的 CSS 选择器。
    • 您可以将:hover 添加到父元素 - codepen.io/anon/pen/RGkGGJ
    【解决方案2】:

    由于没有previous兄弟选择器或父选择器,我们可以在这里做一个小技巧,使用flexbox 及其order 属性。

    在下面的示例中,锚点位于标记中图像div/img 组之前,然后通过提供锚点order: 1 及其父级display: flex 来交换它们的顺序

    另外,兄弟选择器~ 用于兄弟姐妹,而不是孩子,因此它必须定位图像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>

    【讨论】:

    • 它在移动浏览器上是否有效.. 我必须检查一下这似乎是一个非常好的技巧
    • @Learning 是的,请查看此浏览器支持列表:caniuse.com/#feat=flexbox
    猜你喜欢
    • 1970-01-01
    • 2013-02-18
    • 2018-11-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-06-16
    相关资源
    最近更新 更多