Question

我有这个奇怪的情况，因为我的错误在我的网站和JSFiddle上显示不同。这就是为什么我还会放置一个版画屏幕来向您展示它在我的网站上的外观。这是JSFiddle：https://jsfiddle.net/Pysilla/cm8s1d7t/

<section id="fashion" class="img-responsive">
    <div class="container">
        <div class="row">
            <div class="item element col-md-5">
                <div class="page-header">
                    <h2>Fashion<span> photos</span></h2>
                </div>
                <p>Betiam finibus ac tellus sed ullamcorper. Suspendisse vestibulum mollis feugiat. Fusce vel turpis vitae nulla ullamcorper gravida non vel dolor. Ut rhoncus, metus vitae ultrices varius, ex mauris sodales leo, quis imperdiet turpis ipsum et ante. Phasellus hendrerit rutrum tincidunt. Sed sed viverra ligula, non ullamcorper mauris. Quisque dignissim sollicitudin nulla quis tincidunt. Cras at elementum massa. Cras eget mi hendrerit, congue nunc in, tristique massa. Vivamus at vestibulum ex.</p>
                <div class="text-center">
                  <a href="#" role="button" class="btn btn-primary btn-lg"><span>See more</span></a>
                </div>
            </div>
        </div>
    </div>
</section>

（当您更改屏幕大小时，您可以在按钮内部左侧看到小条纹）

我希望你能看到差异。

Answer 1

您只需要在2px上考虑.btn-primary边框。您可以对伪元素的隐藏状态使用translate(calc(-100% - 2px));。

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<style>
.btn-primary{
    margin-top:1em;
    background-color:#3CD3DC;
    background-image:none;
    border:2px solid #3CD3DC;
    display:inline-block;
    transition:all 0.3s;
    overflow:hidden;
    box-shadow:none !important;
    position:relative;
}
.btn-primary:hover{
    background-color:transparent;
    border:2px solid #3CD3DC;
}
.btn-primary:before{
    content:"";
    position:absolute;
    background-color:#1fa5ad;
    width:100%;
    height:100%;
    top:0;
    left:0;
    transform:translateX(calc(-100% - 2px));
    transition: 0.8s;
}
.btn-primary:hover:before{
    transform:translateX(0%);
    left:0;
}
.btn-primary span{
    position:relative;
}
</style>

    <section id="fashion" class="img-responsive">
        <div class="container">
        <div class="row">
            <div class="item element col-md-5">
                <div class="page-header">
                    <h2>Fashion<span> photos</span></h2>
                </div>
                <p>Betiam finibus ac tellus sed ullamcorper. Suspendisse vestibulum mollis feugiat. Fusce vel turpis vitae nulla ullamcorper gravida non vel dolor. Ut rhoncus, metus vitae ultrices varius, ex mauris sodales leo, quis imperdiet turpis ipsum et ante. Phasellus hendrerit rutrum tincidunt. Sed sed viverra ligula, non ullamcorper mauris. Quisque dignissim sollicitudin nulla quis tincidunt. Cras at elementum massa. Cras eget mi hendrerit, congue nunc in, tristique massa. Vivamus at vestibulum ex.</p>
                    <div class="text-center">
            <a href="#" role="button" class="btn btn-primary btn-lg"><span>See more</span></a>
        </div>
            </div>
        </div>

        </div>
    </section>

Answer 2

另一个选择是设置按钮：在元素可见性之前隐藏＆＃34;隐藏＆＃34;默认情况下然后＆＃34;可见＆＃34;鼠标悬停在上面。

.btn-primary:before{
    content:"";
    position:absolute;
    background-color:#1fa5ad;
    width:100%;
    height:100%;
    top:0;
    left:0;
    transform:translateX(-100%);
    transition: 0.8s;
    visibility: hidden;
}
.btn-primary:hover:before{
    transform:translateX(0%);
    left:0;
    visibility: visible;
}

https://jsfiddle.net/cm8s1d7t/1/

悬停时Bootstrap按钮内的空间

2 个答案: