twitter-bootstrap 悬停时突出显示引导行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21873625/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highlight bootstrap row on hover
提问by
Here I have used bootstrap row to show my content.
Originally it's height is less, on mouse hover I want to highlight by increase height and highlighting watmore ...attractively.
在这里，我使用引导行来显示我的内容。最初它的高度较小，在鼠标悬停时，我想通过增加高度和突出显示watmore ...有吸引力来突出显示。
Is there any bootstrap class for this?
是否有任何引导程序类？
<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">  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>
采纳答案by user123
You can use CSS hover to d this
您可以使用 CSS 悬停来实现此目的
Fiddle: 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;
}
回答by Prashobh
Using jquery you can do this very easily
使用 jquery 你可以很容易地做到这一点
$('.moreBtn').mouseover(function(){
$(this).css({
'color' :'red',
//other styles
})
});
or Using css
或使用 css
.moreBtn:hover{
color:red ;
//other styles
}
