鼠标悬停时突出显示Bootstrap行

Question

我在这里使用了Bootstrap的行来展示我的内容。原本它的高度较小，当鼠标悬停时，我想通过增加高度和吸引人的方式突出显示watmore...。

是否有适用于此的Bootstrap类？

Fiddle上的示例

<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>

- user2500861

Answer 1

您可以使用CSS的hover来完成这个操作。

示例：Fiddle。

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

- user123

---

重复提交答案是不必要的，请停止这样做。这段话的意思是，与您先前提交的答案完全相同，请勿重复提交答案。 - Paresh Mayani

Answer 2

使用jQuery，你可以非常容易地完成这个任务。

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

或者使用CSS。

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

- Prashobh

---

你能帮我相对地增加盒子和内部元素的大小吗？ - user2500861

这是我的更新后的代码片段，但 CSS 悬停效果没有改变：http://jsfiddle.net/karimkhan/s5q9w/13/ - user2500861