[英]how to set css position absolute in hover state
CSS位置不正常div
節,我要放大鼠標懸停和DIV div
部分應重疊的其他部分,但不能正常工作FIDDLE LINK
代碼HTML
<body>
<div class="block-div">
<div class="card-box first-child">
<div class="card-box-in">
<div class="card-image">
<img alt="img" src="https://mtgostock.com/contents/cards/thumbs/157x157/en/isd/105.jpg">
</div>
<div class="card-info">
<ul class="bgpupulcards">
<li class="text-center">
<a title="Canyon Minotaur, M14 C" href="https://127.0.0.1/mtgostock/card/Canyon-Minotaur-M14-C-77"> Canyon Minotaur... </a>
<span> Price: $70.00</span>
</li>
<li>
<div class="searhbg2 SCartaddBTN">
<a href="#" data-qstring="">Add To Cart</a>
</div>
</li>
</ul>
</div>
</div>
<div class="card-in-hover">
<div class="card-right-sec">
<ul class="bgpupulcards">
<li class="text-hover">
<p> Available Quantity: 2 </p>
<div class="half"> <p> Rarity: <span> C </span> </p> </div>
<div class="half"> <p> Set: <span> M14 </span></p> </div>
<p> User: <span class="blue"> girishs </span> </p>
<p> Seller Status: <span> Verified </span></p>
</li>
</ul>
</div>
</div>
</div>
<div class="card-box first-child">
<div class="card-box-in">
<div class="card-image">
<img alt="img" src="https://mtgostock.com/contents/cards/thumbs/157x157/en/mm/324.jpg">
</div>
<div class="card-info">
<ul class="bgpupulcards">
<li class="text-center">
<a title="Canyon Minotaur, M14 C" href="https://127.0.0.1/mtgostock/card/Canyon-Minotaur-M14-C-77"> Canyon Minotaur... </a>
<span> Price: $70.00</span>
</li>
<li>
<div class="searhbg2 SCartaddBTN">
<a href="#" data-qstring="">Add To Cart</a>
</div>
</li>
</ul>
</div>
</div>
<div class="card-in-hover">
<div class="card-right-sec">
<ul class="bgpupulcards">
<li class="text-hover">
<p> Available Quantity: 2 </p>
<div class="half"> <p> Rarity: <span> C </span> </p> </div>
<div class="half"> <p> Set: <span> M14 </span></p> </div>
<p> User: <span class="blue"> girishs </span> </p>
<p> Seller Status: <span> Verified </span></p>
</li>
</ul>
</div>
</div>
</div>
<div class="card-box first-child">
<div class="card-box-in">
<div class="card-image">
<img alt="img" src="https://mtgostock.com/contents/cards/thumbs/157x157/en/vma/4.jpg">
</div>
<div class="card-info">
<ul class="bgpupulcards">
<li class="text-center">
<a title="Canyon Minotaur, M14 C" href="https://127.0.0.1/mtgostock/card/Canyon-Minotaur-M14-C-77"> Canyon Minotaur... </a>
<span> Price: $70.00</span>
</li>
<li>
<div class="searhbg2 SCartaddBTN">
<a href="#" data-qstring="">Add To Cart</a>
</div>
</li>
</ul>
</div>
</div>
<div class="card-in-hover">
<div class="card-right-sec">
<ul class="bgpupulcards">
<li class="text-hover">
<p> Available Quantity: 2 </p>
<div class="half"> <p> Rarity: <span> C </span> </p> </div>
<div class="half"> <p> Set: <span> M14 </span></p> </div>
<p> User: <span class="blue"> girishs </span> </p>
<p> Seller Status: <span> Verified </span></p>
</li>
</ul>
</div>
</div>
</div>
<div class="card-box first-child">
<div class="card-box-in">
<div class="card-image">
<img alt="img" src="https://mtgostock.com/contents/cards/thumbs/157x157/en/isd/105.jpg">
</div>
<div class="card-info">
<ul class="bgpupulcards">
<li class="text-center">
<a title="Canyon Minotaur, M14 C" href="https://127.0.0.1/mtgostock/card/Canyon-Minotaur-M14-C-77"> Canyon Minotaur... </a>
<span> Price: $70.00</span>
</li>
<li>
<div class="searhbg2 SCartaddBTN">
<a href="#" data-qstring="">Add To Cart</a>
</div>
</li>
</ul>
</div>
</div>
<div class="card-in-hover">
<div class="card-right-sec">
<ul class="bgpupulcards">
<li class="text-hover">
<p> Available Quantity: 2 </p>
<div class="half"> <p> Rarity: <span> C </span> </p> </div>
<div class="half"> <p> Set: <span> M14 </span></p> </div>
<p> User: <span class="blue"> girishs </span> </p>
<p> Seller Status: <span> Verified </span></p>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
CSS
.card-box{
background: none repeat scroll 0 0 #C7C7C9;
border-radius: 5px;
border: 1px solid #E9E9E9;
min-height: 300px;
float: left;
margin: 15px;
}
.card-box-in{
background: none repeat scroll 0 0 #eaeaec;
border-radius: 5px;
height: 283px;
margin: 8px;
width: 150px;
float: left;
}
.card-box:hover{
z-index: 2;
position: absolute;
}
.card-box:hover .card-box-in{
margin-right: 0;
border-radius: 5px 0 0 5px;
}
.card-box-in .card-image{
padding-top: 15px;
margin-left: 20px;
padding-bottom: 10px;
}
.card-in-hover{
display: none;
width: 149px;
background: none repeat scroll 0 0 #eaeaec;
border-radius: 5px;
height: 283px;
margin: 8px;
float: left;
}
.card-box:hover .card-in-hover{
display: block;
border-radius: 0 5px 5px 0;
margin-left: 0;
}
.card-in-hover .card-right-sec{
border-left: 1px solid #A4A4A4;
height: 260px;
margin: 10px 0;
}
ul.bgpupulcards{
color: #004395;
display: block;
font-family: Arial,Helvetica,sans-serif;
font-size: 14px;
width: 148px;
}
.block_wrapper-shadow { width:100%; text-align:center;}
ul.bgpupulcards li.text-center{
text-align: center;
}
ul.bgpupulcards li a{font-weight:bolder; color:#004395; line-height:21px;}
ul.bgpupulcards li a:hover{ text-decoration:none;}
ul.bgpupulcards li span{ color:#39b54a; font-weight: 700;}
ul.bgpupulcards li.text-hover p { font-size:12px; color:#6b6b6b; width:187px; padding-left:13px; padding-top:4px; padding-bottom:4px; width:140px;}
ul.bgpupulcards li.text-hover p span { color:#39b54a;}
ul.bgpupulcards li.text-hover p span.blue { color:#00aeef;}
.searhbg2{ background:url(../../images/v2.0/searchbg.png) no-repeat left top; width:122px; height:46px; font-size:12px; float:left; color:#fff; text-align:center; line-height:40px; margin:5px 0px 5px 13px;}
.searhbg2 a { color:#fff!important; font-weight:normal!important; padding-left:0!important;}
預期結果
如何通過CSS設置段的絕對位置,到目前為止,我嘗試過但未成功。
請幫助我如何弄清楚狀態。
謝謝
確切的結果由@drip得出
HTML
<div class="block-div">
<div class="card-box first-child">
<div class="card-box-in">
<div class="card-image">
<img alt="img" src="https://mtgostock.com/contents/cards/thumbs/157x157/en/isd/105.jpg">
</div>
<div class="card-info">
<ul class="bgpupulcards">
<li class="text-center">
<a title="Canyon Minotaur, M14 C" href="https://127.0.0.1/mtgostock/card/Canyon-Minotaur-M14-C-77"> Canyon Minotaur... </a>
<span> Price: $70.00</span>
</li>
<li>
<div class="searhbg2 SCartaddBTN">
<a href="#" data-qstring="">Add To Cart</a>
</div>
</li>
</ul>
</div>
</div>
<div class="card-in-hover">
<div class="card-right-sec">
<ul class="bgpupulcards">
<li class="text-hover">
<p> Available Quantity: 2 </p>
<div class="half"> <p> Rarity: <span> C </span> </p> </div>
<div class="half"> <p> Set: <span> M14 </span></p> </div>
<p> User: <span class="blue"> girishs </span> </p>
<p> Seller Status: <span> Verified </span></p>
</li>
</ul>
</div>
</div>
</div>
</div>
CSS
body {background: url(../../images/v2.0/pettarn.jpg) left top repeat;
margin: 0px;
padding: 0px 0 0 0px;
font:12px Arial, Helvetica, sans-serif;
}
a{color:#9b0000; text-decoration:none; outline:none;}
a:hover{text-decoration:underline;}
.floatleft{ float:left !important;}
.floatright{ float:right !important;}
.rt{text-align:right !important;}
.lt{text-align:left !important;}
.jt{text-align:justify !important;}
.ct{text-align:center !important;}
.full{width:100%; float:left;}
.half{width:50%; float:left;}
.clear{clear:both;}
.display{display:inline-block;}
.position { position:relative;}
p, input, h1, h2, h3, h4, h5, ul, li{padding:0; margin:0; outline:none; list-style:none; font-weight:normal;}
img{border:0; outline:none;}
.font0{font-size:0px;}
strong{font-weight:bold;}
h1{ font-family: 'PT Sans', sans-serif; font-size:25px; width:100%; color:#da74b3; line-height:25px; padding:35px 0 15px 0;}
h2 { font-family: 'PT Sans', sans-serif; font-size:30px; text-transform:uppercase; width:100%; text-align:center; padding-top:35px; padding-bottom:25px; color:#FFF;}
/*h3 { font-family: 'PT Sans', sans-serif; font-size:18px; text-transform:uppercase; width:100%; color:#da74b3; line-height:25px; min-height:45px; vertical-align: middle;}*/
h1 img,
h4 img { margin-right:18px; float:left;}
h4 { border-bottom:#e6e6e6 solid 1px;}
h4 img { margin-left:10px;}
.card-box{
position: relative;
background: none repeat scroll 0 0 #C7C7C9;
border-radius: 5px;
border: 1px solid #E9E9E9;
min-height: 300px;
float: left;
margin: 15px;
width: 165px;
}
.card-box-in{
background: none repeat scroll 0 0 #eaeaec;
border-radius: 5px;
height: 283px;
margin: 8px;
width: 150px;
float: left;
}
.card-box:hover{
z-index: 2;
}
.card-box:hover .card-box-in{
margin-right: 0;
border-radius: 5px 0 0 5px;
}
.card-box-in .card-image{
padding-top: 15px;
margin-left: 20px;
padding-bottom: 10px;
}
.card-in-hover{
display: none;
width: 149px;
background: none repeat scroll 0 0 #eaeaec;
border-radius: 0 5px 5px 0;
border: 8px solid #C7C7C9;
border-left: 0;
height: 283px;
margin: 0 0 0 -16px;
position: absolute;
top: 0;
left:100%;
}
.card-box:hover .card-in-hover{
display: block;
}
.card-in-hover .card-right-sec{
border-left: 1px solid #A4A4A4;
height: 260px;
margin: 10px 0;
}
ul.bgpupulcards{
color: #004395;
display: block;
font-family: Arial,Helvetica,sans-serif;
font-size: 14px;
width: 148px;
}
.block_wrapper-shadow { width:100%; text-align:center;}
ul.bgpupulcards li.text-center{
text-align: center;
}
ul.bgpupulcards li a{font-weight:bolder; color:#004395; line-height:21px;}
ul.bgpupulcards li a:hover{ text-decoration:none;}
ul.bgpupulcards li span{ color:#39b54a; font-weight: 700;}
ul.bgpupulcards li.text-hover p { font-size:12px; color:#6b6b6b; width:187px; padding-left:13px; padding-top:4px; padding-bottom:4px; width:140px;}
ul.bgpupulcards li.text-hover p span { color:#39b54a;}
ul.bgpupulcards li.text-hover p span.blue { color:#00aeef;}
.searhbg2{ background:url(../../images/v2.0/searchbg.png) no-repeat left top; width:122px; height:46px; font-size:12px; float:left; color:#fff; text-align:center; line-height:40px; margin:5px 0px 5px 13px;}
.searhbg2 a { color:#fff!important; font-weight:normal!important; padding-left:0!important;}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.