Question

您好我一直在努力尝试向引导程序模板中的.img-circle元素添加悬停功能。理想情况下，我希望圆形图像稍微变暗以允许您单击弹出窗口（已经编码）

这是我的HTML。 CSS我无法找到有效的悬停解决方案。

        <div class="col-lg-4 col-sm-6 text-center">
               <img class="img-circle" src="http://placehold.it/200x200" alt="" a href="javascript:void(0)" onclick="toggle_visibility('popup-box1');">
            <a href="javascript:void(0)" onclick="toggle_visibility('popup-box1');"><h3>Serge</h3></a>
           <h4>Deal sourcing and pricing </h4>
        </div>

        <div class="col-lg-4 col-sm-6 text-center">
            <img class="img-circle" src="http://placehold.it/200x200" alt="" a href="javascript:void(0)" 
                 onclick="toggle_visibility('popup-box2');">
            <a href="javascript:void(0)" onclick="toggle_visibility('popup-box2');"><h3>Ed</h3></a>
               <h4>Private wealth &amp; HNWI liason </h4>

        </div>

        <div class="col-lg-4 col-sm-6 text-center">
            <img class="img-circle" src="http://placehold.it/200x200" alt="" a href="javascript:void(0)" 
                 onclick="toggle_visibility('popup-box3');">
           <a href="javascript:void(0)" onclick="toggle_visibility('popup-box3');"><h3>Mayank Gupta</h3></a>
                 <h4>Deal structuring &amp; compliance </h4>

        </div>

这是我的小提琴https://jsfiddle.net/7z1caucd/当我用光标悬停时，只想让200x200的图像变暗。无法在CSS中弄明白。请帮忙。

Answer 1

尝试将:hover放在img标记之外的其他内容上。例如，将其包装在div中并将课程放在那里。

<div class="img-circle"><img src="http://placehold.it/200x200" /></div>

为css：

.img-circle:hover{
    opacity: 0.5;
}

Answer 2

如果你想让它变暗，你必须使用包装纸。如果您不想这样做，可以更改图像的不透明度，使其具有:hover效果。

.img-circle:hover {
  opacity: 0.7;
}

<div class="col-lg-4 col-sm-6 text-center">
  <img class="img-circle" src="http://placehold.it/200x200" alt="" a href="javascript:void(0)" onclick="toggle_visibility('popup-box1');">
  <a href="javascript:void(0)" onclick="toggle_visibility('popup-box1');"><h3>Serge</h3></a>
  <h4>Deal sourcing and pricing </h4>
</div>

<div class="col-lg-4 col-sm-6 text-center">
  <img class="img-circle" src="http://placehold.it/200x200" alt="" a href="javascript:void(0)" onclick="toggle_visibility('popup-box2');">
  <a href="javascript:void(0)" onclick="toggle_visibility('popup-box2');"><h3>Ed</h3></a>
  <h4>Private wealth &amp; HNWI liason </h4>

</div>

<div class="col-lg-4 col-sm-6 text-center">
  <img class="img-circle" src="http://placehold.it/200x200" alt="" a href="javascript:void(0)" onclick="toggle_visibility('popup-box3');">
  <a href="javascript:void(0)" onclick="toggle_visibility('popup-box3');"><h3>Mayank Gupta</h3></a>
  <h4>Deal structuring &amp; compliance </h4>

</div>

将悬停功能添加到.img-circle bootstrap元素

2 个答案: