用jquery製作圖像發光

我試圖用jquery將鼠標懸停在它們上方，使圖像發光。我嘗試了多種方法，但都沒有工作。用jquery製作圖像發光

應該發光的圖像是列表中的圖像。我使用jQuery，因爲這就是我從學校拿到了Exercize ...

是的，我可以用＃1：P

HTML：

<h1>Grand Theft Auto V - Showcase</h1> 
</header> 
<div id="contentHolder"> 
     <div id="three-columns" class="grid-container"> 
      <ul class="rig columns-3"> 
       <li> 
        <img src="images/1.jpg" /> 
       </li> 
       <li> 
        <img src="images/2.jpg" /> 
       </li> 
       <li> 
        <img src="images/3.jpg" /> 
       </li> 
       <li> 
        <img src="images/4.jpg" /> 
       </li> 
       <li> 
        <img src="images/5.jpg" /> 
       </li> 
       <li> 
        <img src="images/6.jpg" /> 
       </li> 
       <li> 
        <img src="images/7.jpg" /> 
       </li> 
       <li> 
        <img src="images/8.jpg" /> 
       </li> 
       <li> 
        <img src="images/9.jpg" /> 
       </li> 
       <li> 
        <img src="images/10.jpg" /> 
       </li> 
      </ul> 
</div> 
</body> 
</html>

JS：

$(".rig img").hover(function(){ 
    $("this").css("box-shadow", "0px 0px 5px #ddd"); 
    }, function(){ 
    $("this").css("box-shadow", "0px 0px 5px #ddd"); 
});

來源

2015-04-08 Anona

應該是：'$（本）'（不包括引號） – tcd

當你希望他們煥發？點擊？每時每刻？懸停？ –

圖像在懸停時會發光 – Anona

在您的JavaScript中，你有類似的東西：

$("this").css("box-shadow", "0px 0px 5px #ddd");

因爲你用引號將"this"包含在引號中，所以jquery將其解釋爲一個字符串並試圖找到一個<this></this>元素。你想要做的是：

$(this).css("box-shadow", "0px 0px 5px #ddd");

沒有引號。在jQuery中，$(this)引用當前上下文中的元素。懸停時，它的元素目前正在懸停。

來源

2015-04-08 14:08:53

已更改，仍不起作用...？我是否需要將箱子陰影放入css中？ – Anona

它有可能使用'box-shadow'，但你不會注意到它，因爲'＃ddd'顏色非常接近白色。嘗試將'＃ddd'更改爲'＃f00'。一旦你確認它的作品，你可以玩這個顏色。 –

不行不行？ – Anona

這樣的事情，也許......

JS：

$('.holder').hover(function(){ 
    $(this).find('.effect').addClass('glow'); 
    }, function(){ 
    $(this).find('.effect').removeClass('glow'); 
});

HTML：

<div class="holder"> 
    <div class='effect'></div> 
    <img src='http://lorempixel.com/400/200/'> 
    </div>

CSS：

.glow { 
    box-shadow:0px 0px 50px 30px #dedede inset;  
} 
body { 
    background:black; 
} 
img { 
    position:absolute; 
    left:0; 
    top:0; 
    z-index:-1; 
} 
.effect { 
    width:100%; 
    height:100%; 
    position:absolute; 
    left:0; 
    top:0; 
} 
.holder { 
    cursor:pointer; 
    position:relative; 
    z-index:2; 
    width:400px; 
    height:200px; 
    border-radius:6px; 
}

我做了一點複雜的HTML結構，因爲我認爲那個插件et glow效果更好，所以，.effect div覆蓋圖像...看起來不錯，imho。 :)

DEMO：http://jsfiddle.net/L9dypg7f/

來源

2015-04-08 14:22:53 sinisake

用jquery製作圖像發光

回答

相關問題