javascript - ホバー時に画像を暗くする - 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とブートストラップにかなり慣れていません。タイルの上にカーソルを置くと、一般的に暗くするか、それ自体の色合いを暗くすることもできます (つまり、オレンジが濃いオレンジに変わります)。助けてくれてありがとう。

score 0 · Accepted Answer

これがブートストラップパッケージに含まれるものになるとは思えません。解決策については、他の分野に手を差し伸べる必要があります。これの効果に何かがそれを行う必要があります。

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

このjsfiddleをチェックしてください

score 0 · Accepted Answer

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

変更したい要素に ID を与えることができます。その上にカーソルを合わせると、アニメーション機能が適用されます。$(this) は、ホバーされているアイテムを意味します。ここにたくさんの色があることがわかります。div の背景色を明るい赤に設定し、カーソルを合わせると、そのリストから別の色が選択されます。16 進数の色の値を使用する場合は、'background-color':'#abc123' のように # を前に付けます。

score 0 · Accepted Answer

簡単な 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/

javascript - ホバー時に画像を暗くする - twitter bootstrap 3.0

3 に答える 3

Related

Reference