我使用Twitter Bootstrap 3.0设置了以下方案:
现在,当光标悬停在每个图块上方时,如何使图块变暗?我尚未对bootstrap.css进行任何更改。我的自定义styles.css如下所示:
.row {
margin-top: 3px;
}
我的HTML如下:
{% include 'buzzwire/header.html' %}
{% load staticfiles %}
<br /><br />
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-lg-3">
<a href="/test-buzz"><img src="{% static 'img/buzzbutton.jpg' %}"/></a>
</div>
<div class="col-lg-3">
<a href="/testing/test"><img src="{% static 'img/testbutton.jpg' %}"/></a>
</div>
<div class="col-lg-3">
<a href="/test-buzz"><img src="{% static 'img/buzzbutton.jpg' %}"/></a>
<!--<a href="/test/about"><img src="{% static 'img/about.jpg' %}"/></a>
<a href="/test/contact"><img src="{% static 'img/contact.jpg' %}"/></a>-->
</div>
<div class="col-lg-3">
<a href="/test-buzz"><img src="{% static 'img/testbutton.jpg' %}"/></a>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<a href="/test-buzz"><img src="{% static 'img/testbutton.jpg' %}"/></a>
</div>
<div class="col-lg-3">
<a href="/test/categories"><img src="{% static 'img/buzzbutton.jpg' %}"/></a>
</div>
<div class="col-lg-3">
<a href="/test-buzz"><img src="{% static 'img/testbutton.jpg' %}"/></a>
<!--<a href="/test/about"><img src="{% static 'img/about.jpg' %}"/></a>
<a href="/test/contact"><img src="{% static 'img/contact.jpg' %}"/></a>-->
</div>
<div class="col-lg-3">
<a href="/test-buzz"><img src="{% static 'img/buzzbutton.jpg' %}"/></a>
</div>
</div>
{% include 'buzzwire/footer.html' %}
我对CSS和Bootstrap很陌生。将鼠标悬停在砖块上时,通常可以将其变暗,或者将其变暗一些也可以(例如,橙色变成深橙色)。预先感谢您的帮助。
最佳答案
我不认为这将是bootstrap软件包所包含的内容,您必须向其他领域寻求解决方案。某种效果应该可以做到。
$j(function() {
$j(".fadeover").hover(function() {
$j(this).animate({
opacity: 0.2
});
}, function() {
$j(this).stop(true, true).animate({
opacity: 1
});
});
});
Check this jsfiddle out