Question

这里我使用bootstrap行来显示我的内容。最初它的高度较小，在鼠标悬停时我想通过增加高度突出显示watmore ...吸引人。

这是否有任何bootstrap类？

<div class="c1">
  <div class="row">
    <div class="col-md-12">
      <div class="item">
        <img class="media-object" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRzqEv5GXTFGZ1jOzAMNldPJAB6qCU2LRaiiWsld9o7zN1gz_jKaQ" height="50" width="125">
        <div class="descriptionContainer">
          <h6>Title of page</h6>
        </div>
        <a class="pillBtn" style="background: '.$color.' !important;" href="#">50 </a>
        <a class="moreBtn" href="'.$url.'" target="_blank">&nbsp wat more?...
          <img class="smileyImg" src="http://www.mlvwrites.com/wp-content/uploads/2010/10/smiley-face.png" height="20" width="25">
        </a>
      </div>
    </div>
  </div>
</div>

Answer 1

你可以使用CSS悬停来实现这个

小提琴：Example

.item:hover h6 {
    margin-top: 20px;
    font-size: 14px;
}

.item:hover .moreBtn img {
    margin-top: 4px;
}

.item:hover .moreBtn {
    position: relative;
    font-size: 16px;
    margin-right: 10px;
    margin-top: 40px;
    color: red;
    text-shadow: 0px 1px 0px;
    font-family: Helvetica;
    font-weight:bold;
    text-style:italic;
    }
.item:hover .pillBtn {
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    background:#7CDD97;
    padding: 21px 70px 21.0px 70px;
    color: #FFF;
    font-weight: bold;
    font-size: 20px;
    text-decoration: none;
}
.item:hover {
    background:#F3F3F3;
    height: 70px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
}
.item:hover .media-object {
    height: 70px;
    width: 140px;
}

Answer 2

使用jquery，您可以非常轻松地完成此操作

$('.moreBtn').mouseover(function(){
    $(this).css({
        'color' :'red',
        //other styles
    })
});

或使用css

.moreBtn:hover{
    color:red ;
    //other styles
}

突出显示悬停时的引导行

2 个答案: