0

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

4

3 回答 3

0

我不相信这会是引导程序包中包含的东西，您必须为您的解决方案接触其他领域。达到这个效果的东西应该这样做。

$j(function() {
    $j(".fadeover").hover(function() {
        $j(this).animate({
            opacity: 0.2
        });
    }, function() {
        $j(this).stop(true, true).animate({
            opacity: 1
        });
    });
});

检查这个jsfiddle

于 2013-10-23T03:35:01.457 回答
0 
$('#pictureIdYouWantToChange').hover(function(){
      $(this).animate({
        'background-color':'DarkOrange'
});
});

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

于 2013-10-23T03:35:24.053 回答
0

这是一些简单的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/

于 2013-10-23T04:00:50.480 回答