Question

我使用Twitter Bootstrap 3.0设置了以下方案： test 现在，当光标悬停在每个图块上时，如何使图块变暗？我没有对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 它将应用animate函数。 $（this）只是意味着正在盘旋的物品。你可以看到here我们有一堆颜色。将div的背景颜色设置为浅红色，当您将鼠标悬停在其上时，从该列表中选择不同的颜色。如果您选择使用十六进制颜色值前缀，则使用＃比如'background-color'：'＃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/

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

3 个答案: