悬停溢出div

我有一个项目，并希望对div做动态效果，当用户悬停div。我想使用css3的这种效果，但我有溢出颜色问题与悬停的股利。悬停溢出div

请帮我解决问题。我的代码是在这里

.product-box a:hover .prodiv2:before 
 
{ 
 
\t content:""; 
 
\t background:rgba(247,146,45,0.6); 
 
\t display:block; 
 
\t width:100%; 
 
\t height:100%; z-index:1; 
 
\t position:absolute; 
 
\t left:0; 
 
\t top:0; 
 
\t margin-right:100px !important; 
 
\t margin:0 auto !important; 
 
} 
 
.prodiv2 img 
 
{ 
 
\t width:100% !important; 
 

 
}

<!DOCTYPE Html> 
 
<html> 
 
    <head> 
 
    <title></title> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    </head> 
 
    <body> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-md-4 col-sm-6 rowm"> 
 
      <div class="product-box"> 
 
       <a href="continuous_parison.php"> 
 
\t \t   <div class="prodiv2"> 
 
\t \t \t \t \t <img src="http://aew.worldwebinfotech.in/images/card1.jpg" alt="" class="img-responsive"> \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t <div class="prodiv3"> 
 
\t \t \t \t \t  <h2>Continuous<br>Parison Series</h2> 
 
\t \t \t \t \t  <p>Ranging from : 200 ML -5000ML</p> 
 
\t \t \t \t \t  <button class="link-icon">View</button> 
 
         </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t </a> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="col-md-4 col-sm-6 rowm"> 
 
\t \t \t <div class="product-box"> 
 
\t \t \t \t <a href="deflashing_machine.php"> 
 
\t \t \t \t \t <div class="prodiv2"> 
 
\t \t \t \t \t \t <img src="http://aew.worldwebinfotech.in/images/card1.jpg" alt="" class="img-responsive"> 
 
\t \t \t \t \t \t <div class="prodiv3"> 
 
\t \t \t \t \t \t \t <h2>Auto Deflashing<br>Series</h2> 
 
\t \t \t \t \t \t \t <p>Ranging from : 200ML- 5LTR</p> 
 
\t \t \t \t \t \t \t <button class="link-icon">View</button> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </a> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 
    </body> 
 
</html>

来源

2017-02-14 Khetaram

你要悬停只为图像添加该代码在你的CSS？ – user7357089

不，我想悬停所有，但我想从左侧和右侧删除多余的颜色 – Khetaram

.product-box{ 
    position:relative; 
    float:left; 
}

来源

2017-02-14 07:33:49

感谢您的支持 – Khetaram

回答

相关问题