我正在为我的网站中的块进行悬停效果。我终于完成了所有工作,直到我到达最后一个街区。正如您在this link sample中看到的那样,悬停移位。
这是我正在使用的CSS,但我不知道问题是什么,因为它对前两个块有效。
#panel-seventh-wrapper .region {
position: relative;
}
#panel-seventh-wrapper .region .block-block {
display: none;
position: absolute;
z-index: 99999;
}
#panel-seventh-wrapper .region .block-block .block-inner {
width: 288px;
height: 122px;
background: orange;
display: table-cell;
vertical-align: middle;
text-align: center;
color: white;
}
#panel-seventh-wrapper .region:hover .block-block {
display: block;
}
我添加了clearfix思路会有所帮助,但是没有。
任何帮助和指导将不胜感激。谢谢。
如果有帮助,实际问题就在这里:我昨天开始的投资组合网站enter link description here。向下滚动并将鼠标悬停在滑块下的第三个图像上。
答案 0 :(得分:0)
前两个正在发挥作用,因为它们碰巧是正确的尺寸。第三个是完全按照预期做的,但由于大小错误,它表明你的代码并不具体。你指定它应该绝对定位,但如何。放置顶部或左侧或右侧或底部组合。
.region .block-block
position: absolute; /* absolute what? */
top: 0;
left: 0;
z-index: 2; /* 2 is more that 1... you don't need 999 */
}
如果您想学习,请使用以下代码:
<div class="your-box">
<img src="http://placekitten.com/400/300" alt="" />
<div class="hover-cover">
<div class="text-w">
<p>Hello. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
* { /* google it */
box-sizing: border-box;
}
.your-box {
position: relative;
/* so you can position things absolutely to it, inside - to its boundary */
border: 1px solid blue;
/*just to see*/
width: 300px;
/* the box width --- (smaller than image) */
}
.your-box img { /* make box image adhere to size */
display: block;
width: 100%;
height: auto;
}
.your-box .hover-cover {
position: absolute; /* posit ion based on relative parent */
top: 0; left: 0;
width: 100%;
height: 100%;
background: orange;
color: white;
text-align: center;
padding: 1em;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.your-box:hover .hover-cover {
opacity: 1;
transition: opacity .3s ease-in-out;
}