将悬停功能添加到.img-circle引导程序元素

您好，我一直在努力尝试将悬停功能添加到引导程序模板中的.img-circle元素。理想情况下，我希望圆形图像稍微变暗以允许您单击到弹出窗口（已编码）将悬停功能添加到.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中弄清楚。请帮忙。

来源

2016-05-31 Serge Lioutyi

有关使用不透明什么？像这样： .img-circle：hover { opacity：0.6; filter：alpha（opacity = 60）;/*对于IE8和更早版本*/ } –

尝试将:hover放在img标记以外的其他位置。例如将其包装在div中并将课程放在那里。

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

的CSS：

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

来源

2016-05-31 19:36:45 marcusshep

是的，这是优雅简单，适用于我的目的。谢谢！ –

如果你想变深，你必须使用的包装。如果你不想这样做，你可以改变图像的不透明度，使其具有: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>

来源

2016-05-31 19:41:39

谢谢你的作品 –

将悬停功能添加到.img-circle引导程序元素

回答

相关问题