4

jQuery でホバーすると、div にグロー効果が必要です。これが私のコードです：

HTML

<div class="tablerow">  
    <div class="image">
       <img src="1.jpg">
    </div>

    <div class="info">
       <p>
       <span class="heading">the PURSUIT of HAPPYNESS</span><br>       
       <span class="sub">Inspired by a true story.</span><br>
       <span class="data">Chris Gardener finds the "i" in Happiness...</span><p>
    </div>
</div>

CSS

.tablerow{
    width:100%;
    height:185px;
    padding:0;
}

jqueryでホバーするとグロー効果（シャドウではない）が必要なクラスtablerowにさらに8つのdivがあるので、それについての助けが必要です。（私はCSSテーブルを使用しました）。

4

5 に答える 5

8

これは、CSS を使用するだけで実現できます。ホバー (またはデバイスの場合はクリック) でインセット ボックスの影を使用し、色を黄色/金色または表示したい他の色に変更するだけです。ボックスの外側に必要なグロー/シャドウには、通常のボックスシャドウを使用できます

element {
  box-shadow:none;
}
element:hover, element:active {
  box-shadow: inset 0 0 10px #(color of the glow you want);
}

これにより、内側と外側に影ができます

element {
  box-shadow:none;
}
element:hover, element:active {
  box-shadow: 0 0 5px #(color), inset 0 0 10px #(color of the glow you want);
}
于 2013-10-07T15:47:34.063 に答える
1

css3 の box-shadow を使用できます。このようなものはおそらくあなたのために働くでしょう：

.glowMe:hover {
    -webkit-box-shadow:0 0 15px #ffffff; 
    -moz-box-shadow: 0 0 15px #ffffff;
    -ms-box-shadow: 0 0 15px #ffffff; 
    box-shadow:0 0 15px #ffffff;
}

jQuery でホバーを切り替えたい場合は、次のようにすることができます。

$('.my-div-class').on('hover', function() {
  $('.my-div-class').removeClass('glowMe');
  $(this).addClass('glowMe');
});
于 2013-10-07T15:47:05.807 に答える
1

これは、box-shadow プロパティを使用したグロー効果です。これは、Javascript を使用せずに魔法のようにする必要があります。

.tablerow:hover {
    box-shadow: 0 0 20px blue;
}
于 2013-10-07T15:47:40.783 に答える
0

あなたが求めていると思うのは、アニメーション化された光です。jQuery、jQuery UI、および jQuery UI プラグインを使用するソリューションを思いつくことができました。

ここで jsFiddle を確認できます: http://jsfiddle.net/cyberdash/mAmvE/2/

$( ".tablerow" ).mouseenter(function() {
    $( this ).animate({boxShadow: '0 0 30px #ff0000'}, 200 );
});

$( ".tablerow" ).mouseleave(function() {
    $( this ).animate({boxShadow: '0 0 0 #000000'}, 200 );
});

私が使用したプラグインはこちらから入手できます: http://www.bitstorm.org/jquery/shadow-animation/

于 2013-10-07T16:21:27.973 に答える
0

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

http://jsfiddle.net/XBNkn/

.box:hover
{
    box-shadow: 0px 0px 15px 5px #f2e1f2; 
    -webkit-box-shadow: 0px 0px 15px 5px #f2e1f2;
    -moz-box-shadow: 0px 0px 15px 5px #f2e1f2;
}
于 2013-10-07T15:57:53.223 に答える