Question

我正在尝试制作叠加效果，但当我将鼠标悬停在链接上时，内容不会显示为全宽，see from my pen when you hover over the box and the blue pops up

这是我的代码：

<div id="portfolio">
    <a href="" id="id-1" class="portfolio-link">
        <div class="portfolio-content">
            <div class="portfolio-overlay">
                <h5>Paragraph</h5>
            </div>
        </div>
    </a>

    <a href="" id="id-2" class="portfolio-link">
        <div class="portfolio-content">
            <div class="portfolio-overlay">
                <h5>Paragraph</h5>
            </div>
        </div>
    </a>

    <a href="" id="id-3" class="portfolio-link">
        <div class="portfolio-content">
            <div class="portfolio-overlay">
                <h5>Paragraph</h5>
            </div>
        </div>
    </a>

    <a href="" id="id-4" class="portfolio-link">
        <div class="portfolio-content">
            <div class="portfolio-overlay">
                <h5>Paragraph</h5>
            </div>
        </div>
    </a>
</div>

CSS：

h5{
  visibility: hidden;
}

div#portfolio {
    display: flex;
    flex-wrap: wrap;
}

div#portfolio a,
div#portfolio a > div{
    width: 100%;
    max-width: 25%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

div#portfolio a { 
    background-size: cover;
    background-position: 50%;
}

div#portfolio a:hover > div{
    background-color: blue;
}

div#portfolio a:hover h5{
    visibility: visible;
    transition: visibility .5s;
    -webkit-transition: visibility .5s;
}

#id-1{
   background-image: url(images/Sidney-web2web.png);
   background-color: black;
}

#id-2{
   background-image: url(images/Sidney-web2web.png);
   background-color: red;
}

如何让蓝色占据整个盒子？

希望你能帮忙

Answer 1

我在你的悬停中添加了position:absolute;：

div#portfolio a:hover > div{
    background-color: blue;
    position:absolute;
}

请参阅下面的完整代码：

h5{
  visibility: hidden;
}

div#portfolio {
    display: flex;
    flex-wrap: wrap;
}

div#portfolio a,
div#portfolio a > div{
    width: 100%;
    max-width: 25%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

div#portfolio a { 
    background-size: cover;
    background-position: 50%;
}

div#portfolio a:hover > div{
    background-color: blue;
    position:absolute;
}

div#portfolio a:hover h5{
    visibility: visible;
    transition: visibility .5s;
    -webkit-transition: visibility .5s;
}

#id-1{
   background-image: url(images/Sidney-web2web.png);
   background-color: black;
}

#id-2{
   background-image: url(images/Sidney-web2web.png);
   background-color: red;
}

<div id="portfolio">
    <a href="" id="id-1" class="portfolio-link">
        <div class="portfolio-content">
            <div class="portfolio-overlay">
                <h5>Paragraph</h5>
            </div>
        </div>
    </a>

    <a href="" id="id-2" class="portfolio-link">
        <div class="portfolio-content">
            <div class="portfolio-overlay">
                <h5>Paragraph</h5>
            </div>
        </div>
    </a>

    <a href="" id="id-3" class="portfolio-link">
        <div class="portfolio-content">
            <div class="portfolio-overlay">
                <h5>Paragraph</h5>
            </div>
        </div>
    </a>

    <a href="" id="id-4" class="portfolio-link">
        <div class="portfolio-content">
            <div class="portfolio-overlay">
                <h5>Paragraph</h5>
            </div>
        </div>
    </a>
</div>

希望这有帮助！

Answer 2

简单地分开：

div#portfolio a,
div#portfolio a > div{
    width: 100%;
    max-width: 25%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

到此：

div#portfolio a {
    width: 100%;
    max-width: 25%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

div#portfolio a > div{
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

悬停覆盖框未达到全宽

2 个答案: