html - 如何在悬停状态下设置CSS绝对位置

标签 html css hover position

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;}

预期结果

enter image description here

如何通过CSS设置section的绝对位置，我试过至今没有成功。

请帮助我如何计算状态部分。

谢谢

最佳答案

@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;}

关于html - 如何在悬停状态下设置CSS绝对位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25472022/

上一篇：html - 如何将可扩展的 div 对齐到始终居中/居中的元素的一侧 - css

下一篇：css - Bootstrap 轮播 - 调整溢出隐藏

相关文章：

html - 不能在页脚中 float 链接吗？

javascript - 使用jquery和css隐藏菜单栏div下方的容器div

html - 当我悬停在 div 上时自定义链接

javascript - 查找并替换字符串中第 n 次出现的 [bracketed] 表达式

javascript - jQuery Toggle 无法在本地和我的网站上运行，但可以在 jsFiddle 上运行？

css - html5进度条中的Webkit渐变背景渐变？

html - 如果高度大于主体，则无法使固定 block 可见

jquery - 鼠标悬停时添加边框

html - 将 :hover 应用于::before(使用 li)

javascript - 在两个变量之间随机选择并赋予其中一个变量 true 值

©2024 IT工具网  联系我们