Question

当我将鼠标悬停在链接上时，我需要为图像添加边框或框阴影。悬停应在圆形图像周围显示动画圆圈。我正在使用以下css，但它不起作用。

<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;
}

Answer 1

一般兄弟选择器（~）将找不到选择器左侧元素之前的元素。要完成这项工作，您必须在HTML中切换sub-page-menu-a和sub-page-menu-img的顺序。

但是，这仍然不起作用，因为img-circle不是sub-page-menu-a的兄弟。

工作代码：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

由于没有上一个兄弟选择器或父选择器，我们可以使用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>

public function index($state = null, $category = null)
{
    $this->load->model('M_kegiatan');
    $data['username'] = $this->session->userdata('username');

    if (!empty($state) || !empty ($category))
    { 
        $data['kegiatan'] = $this->M_kegiatan->get_filtered($state, $category);
    }
    else 
   {
        $data['kegiatan'] = $this->M_kegiatan->get_kegiatan();
   }
   $this->load->view('beranda', $data);
}

在锚定悬停时为图像添加边框或框阴影

2 个答案: