Question

我有一个项目，并希望在用户悬停div时对div进行动态效果。我正在尝试使用css3这个效果，但我在悬停时有div的溢出颜色问题。

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

＆＃13;

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

＆＃13;

<!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">
		          <div class="prodiv2">
					  <img src="http://aew.worldwebinfotech.in/images/card1.jpg" alt="" class="img-responsive">									
					  <div class="prodiv3">
					     <h2>Continuous<br>Parison Series</h2>
					     <p>Ranging from : 200 ML -5000ML</p>
					     <button class="link-icon">View</button>
                      </div>
				  </div>
				</a>
			</div>
		</div>
		<div class="col-md-4 col-sm-6 rowm">
			<div class="product-box">
				<a href="deflashing_machine.php">
					<div class="prodiv2">
						<img src="http://aew.worldwebinfotech.in/images/card1.jpg" alt="" class="img-responsive">
						<div class="prodiv3">
							<h2>Auto Deflashing<br>Series</h2>
							<p>Ranging from : 200ML- 5LTR</p>
							<button class="link-icon">View</button>
						</div>
					</div>
				</a>
			</div>
		</div>
	</div>
</div>
  </body>
</html>

＆＃13;

Answer 1

在您的css中添加此代码

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

在悬停溢出div

1 个答案: