Question

Hez伙计们，我在页面上有一些元素，我用边框包装。这些元素彼此接近，当然，在它们相互接触的地方，我有双边框。

想的是，我已经从这些元素建立了链接，所以现在应用了一些额外的边框，我不知道如何删除它。

下面的代码在元素我们不是链接时有用地删除了双边框。

请你帮我删除链接上的这个边框？

谢谢}

HTML

    <section class="popular-items clearfix">
        <a href="detail.html">
            <div class="item">
                <img src="img/pink.png" alt="pink"><br>
                <span>2015</span>
                <h4 class="pink">pink</h4>
                <p class="out-of-stock">Abc</p>
            </div>
        </a>
        <a href="detail.html">
            <div class="item">
                <img src="img/white.png" alt="white"><br>
                <h4 class="green">white</h4>
                <p>5 €</p>
            </div>
        </a>
        <a href="detail.html">
            <div class="item">
                <img src="img/pink.png" alt="pink"><br>
                <h4 class="pink">Pink</h4>
                <p class="coming-soon">Pink</p>
            </div>
        </a>
        <a href="detail.html">
            <div class="item">
                <img src="img/red.png" alt="red"><br>
                <h4 class="red">Red</h4>
                <p>5 €</p>
            </div>
        </a>
    </section>

SCSS

.popular-items {
    width: 100%;

    .item {
    float: left;
    width: 25%;
    border: 1px solid #dddddd;
    padding: 1%;
    border-right-width: 0;
    height: 420px;

        &:last-child {
        border-right-width: 1px;
    }

        &:hover + & {
        border-left-width: 0;
    }

        &:hover {
        border: 1px $dark solid;
    } 
}
}

Answer 1

我认为您可以通过将链接的边框设置为0px来解决这个问题。

border : none;

链接会导致双边框

1 个答案: