javascript - 使悬停时的图像变暗 - twitter bootstrap 3.0

Question

我使用 Twitter Bootstrap 3.0 设置了以下方案: 现在，当光标悬停在每个图 block 上时，如何使图 block 变暗？我没有对 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 还很陌生。将鼠标悬停在图 block 上时，通常可以将其变暗或将其本身变暗的阴影也可以(即橙色变为深橙色)。预先感谢您的帮助。

Answer 1

我不认为这会是 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