突出显示悬停时的引导行

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 悬停来实现此目的

小提琴：示例

.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;
}