我使用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

07-24 09:50
查看更多