html - 向 .img-circle Bootstrap 元素添加悬停功能

Question

您好，我一直在努力尝试从 Bootstrap 模板向 .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>

这是我的 fiddle 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;
}