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

Question

我使用 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 很陌生。在将鼠标悬停在瓷砖上时，通常将其变暗或将其自身变暗也可以（即橙色变为深橙色）。提前感谢您的帮助。

Answer 1

我不相信这会是引导程序包中包含的内容，您必须联系其他领域以获得解决方案。与此有关的东西应该这样做。

$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

Answer 2

$('#pictureIdYouWantToChange').hover(function(){
      $(this).animate({
        'background-color':'DarkOrange'
});
});

您可以为要更改的元素以及鼠标悬停在其上时指定一个 ID 它将应用动画功能。 $(this) 仅表示悬停在上面的项目。 你可以看到here我们有一堆颜色。将 div 的背景颜色设置为浅红色，当您将鼠标悬停在它上面时，从该列表中选择不同的颜色。 如果您选择使用十六进制颜色值，请在其前面加上 # 比如'背景色'：'#abc123'

Answer 3

这是一些简单的 html：

    <div class="row">
        <div class="col-xs-3 orange"></div>
        <div class="col-xs-3 yellow"></div>
        <div class="col-xs-3 orange"></div>
        <div class="col-xs-3 yellow"></div>
    </div>
    <div class="row">
        <div class="col-xs-3 yellow"></div>
        <div class="col-xs-3 orange"></div>
        <div class="col-xs-3 yellow"></div>
        <div class="col-xs-3 orange"></div>
    </div>

您只需要 CSS 中的悬停选择器：

div{
    height:40px;
}
.yellow{
    background-color: yellow;
}
.yellow:hover{
    background-color: red;
}
.orange{
    background-color: orange;
}
.orange:hover{
    background-color: blue;
}

不过，这是一个少用的好机会：

@yellow:yellow; //change here
@orange:orange; //change here

div{
    height:40px;
}
.yellow{
    background-color: @yellow;
}
.yellow:hover{
    background-color: darken(@yellow,10%);
}
.orange{
    background-color: @orange;
}
.orange:hover{
    background-color: darken(@orange,10%);
}

这样做可以很容易地进行更改和微调。您还可以编写自己的函数来从本质上使所有内容变暗...

查看并使用变暗、阴影、色调和旋转：http://lesscss.org/#reference

编辑：这是给你的小提琴：http://jsfiddle.net/XnPJA/