Question

我在这个轮播中担心，我使用bootstram和OWL Carousel：http://owlgraphic.com/owlcarousel

我需要做的是，使点击的按钮更高，并且在图像前面，就像附加的图像一样。

HTML

<!-- owl carousol start -->
<div id="demo">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">


                <div id="sync1" class="owl-carousel">
                    <div class="item">
                        <h1>Atentos, despiertos, <br/> llenos de energía</h1>
                        <img src="images/slider.png"/>
                    </div>
                    <div class="item">
                        <h1>Atentos, despiertos, <br/> llenos de energía</h1>
                        <img src="images/slider.png"/></div>
                    <div class="item">
                        <h1>Atentos, despiertos, <br/> llenos de energía</h1>
                        <img src="images/slider.png"/></div>
                    <div class="item">
                        <h1>Atentos, despiertos, <br/> llenos de energía</h1>
                        <img src="images/slider.png"/></div>
                    <div class="item">
                        <h1>Atentos, despiertos, <br/> llenos de energía</h1>
                        <img src="images/slider.png"/></div>

                </div>

                <div id="sync2" class="owl-carousel">
                    <div class="item"><a href="#"><h1>Un nuevo amanecer</h1></a></div>
                    <div class="item"><a href="#"><h1>Conoce Expo Digital</h1></a></div>
                    <div class="item"><a href="#"><h1>Expo Priority</h1></a></div>
                    <div class="item"><a href="#"><h1>Expo Gold</h1></a></div>
                    <div class="item"><h1>Expo at work</h1></div>
                </div>


            </div>

        </div>

    </div>

</div>

和CSS

#sync1 .item{
    background: #0c83e7;
    padding: 0px 0px;
    margin: 0px;
    color: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;



}
#sync2 .item{
    background: #fff;
    padding: 10px 0px;
    margin: 0px;
    color: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
    cursor: pointer;
    border-radius:0px;
    margin-left:-5px;
    border-left:1px solid #91c04e;

    border: 1px solid red;

}
#sync2 .item:nth-child(6){
    border:0px;
}
#sync2 .item h1{
  font-size: 18px;
    font-family: HelveticaNeueLight;
    color:#9ac55d ;
}
#sync2 .synced .item{
  background: #9ac55d;
    color: #fff;
}
#sync2 .synced .item h1{
    color: #fff;
    font-family: HelveticaNeueLight;
}
#sync1 .item h1{

    font-family: HelveticaNeueLight;
    font-style: italic;
    position: absolute;
    width: 98%;
    text-align: right;
    font-size: 48px;
}
#sync1 .item img{

    width: 100%;




}

.owl-item .item img{
    width:100%;
    overflow:hidden;

}

.owl-theme .owl-controls .owl-buttons div{
    display:none;


}


.owl-wrapper{
    width:1000px;


}


.owl-theme .owl-controls{
    margin:0px;
}
#sync2{

    z-index:9999999999999;
    margin-top:0px;
}
#sync2 .synced .item{

    color:#1c6f42;
    border-right:1px solid #91c04e;

    height: 55px;
    margin: -10px 0px 0px 0px;
    z-index: 99999999;
}

#sync2 .item{

    color:#91c04e;
    height:45px;

}

#demo .full_width{

    max-width:100%;
    overflow:hidden;

}

#sync2 .item a:active{

    color:red;
    height:55px;
    background-color: white;
    margin: 10px 1px 1px 1px;
    z-index: 9999999;   

}

我需要的是让这个按钮更高并且在主图像的前面。这就是我来这里的原因，因为我没有在其他地方找到解决方案。

这就是我这样做的方式：

这就是我需要它工作的方式。

所以我尝试了很多案例，但我仍然没有找到办法。

谢谢你的帮助！

Answer 1

在css3中你有比例属性：

.item:hover{
  transform: scale(2);
}

会使悬停物品变大2倍。

 .item a:active{
      transform: scale(2);
    }

如果需要，请随时询问

CSS格式轮播问题

1 个答案: