在鼠標上改變div的顏色

我在div內有一行文字（一個鏈接）。我想讓鼠標在鏈接上改變div顏色。我嘗試過各種不成功的事情。你可以在這裏看到我目前的代碼：http://jsfiddle.net/Grek/D3TzM/請注意，我不一定在尋找一個jQuery解決方案。韓國社交協會的幫助在鼠標上改變div的顏色

CSS

.source-title-box a{ 
    color:#467FD9; 
    display:inline-block; 
} 
.source-title-box a:hover{ 
    color:#666666; 
} 
.source-title-box hover{background:#cb2326;}

JS：

$('a').hover(function(){ 
    $(this).parent().toggleClass('hover'); 
});

來源

2012-08-13 Greg

更改此：

.source-title-box a 
{ 
    color:#467FD9; 
    display:block; 
    text-decoration:none;  
}

到：

.source-title-box a 
{ 
    color:#467FD9; 
    display:block; 
    text-decoration:none; 
    padding:15px; 
}

這：

.source-title-box 
{ 
    color: #000; 
    background: #fff; 
    padding: 15px; 
    width: 200px; 
    position: relative; 
    margin-top:10px; 
    border: 1px dotted #666; 
}

到：

.source-title-box 
{ 
    color:#000; 
    background:#fff; 
    width:230px; 
    position:relative; 
    margin-top:10px; 
    border:1px dotted #666; 
}

DEMO

沒有JS要求。

來源

2012-08-13 20:18:03 snuffn

非常感謝，這就是我一直在尋找的！ – Greg 2012-08-13 20:26:00

讓你有JavaScript和添加此CSS類：

.hover { 
    background-color: #f00; 
}

http://jsfiddle.net/RLjvB/

來源

2012-08-13 20:11:47 wanovak

爲什麼選擇投票？需要JavaScript來滿足OP的請求。 – wanovak 2012-08-13 20:15:34

你可以在下面選擇一個僞類，如:hover。完全不需要JavaScript。

http://jsfiddle.net/7bFKq/

.source-title-box:hover{ 
    background-color:#467FD9; 

} 

.source-title-box:hover a{ 
    color:#FFFFFF; 
}

如果必須與一個懸停做到這一點，你需要的JavaScript。

http://jsfiddle.net/7wwdb/

$('a').hover(function(){ 
    // .closest will get you to the div regardless of what might 
    // be in between. With .parent you get to the absolute parent, which 
    // in your case is a span 
    $(this).closest('.source-title-box').toggleClass('hover'); 
});

CSS基本上是一樣的，只是:hover到.hover

.source-title-box.hover{ 
    background-color:#467FD9; 

} 

.source-title-box.hover a{ 
    color:#FFFFFF; 
}

來源

2012-08-13 20:12:08 Fresheyeball

OP的要求是在'a'懸停時改變'div'背景。 – wanovak 2012-08-13 20:13:11

@wanovak爲什麼他會希望用戶在觸發顏色變化之前將鼠標放入div的鏈接部分？如果這確實是要求，我會認爲這是優越的。 – Fresheyeball 2012-08-13 20:14:57

不知道，但這就是他要求的。 – wanovak 2012-08-13 20:16:43

jsFiddle DEMO

只要看看最近的DIV中，immidiate.parent()是<span>標籤（它們不會自動阻止元素，除非您以這種方式製作元素）。

$('.activity-title a').on('mouseover', function() { 
    $(this).closest('div').toggleClass('hover'); 
}); 

$('.activity-title a').on('mouseout', function() { 
    $(this).closest('div').toggleClass('hover'); 
});

來源

2012-08-13 20:14:29

格雷格，有2點：

1）的jquery .hover（）函數需要兩個處理程序作爲參數。一個用於處理程序（鼠標懸停）和一個用於處理程序（鼠標懸停）。只給出一個參數使用該參數作爲入出處理程序，即兩個鼠標事件都使用相同的處理程序。

2）確保您寫下的腳本（js）包含在頁面的底部。即在關閉「body」標籤之前。
這是因爲：腳本執行時可能未加載html元素。

...Your HTML Code... 
<script> 
    $('a').hover(function(){ 
    $(this).parent().toggleClass('hover'); 
    }); 
</script> 
</body>

希望這會有所幫助。

來源

2012-08-13 20:43:09

感謝您的詳細解答。我在頭部調用包含腳本的js文件。這可以嗎？ – Greg 2012-08-13 20:46:09

建議將它放在頁面底部。
我通常有2個.js文件：一個是頁眉，一個是頁腳。如果你真的想把它包含在部分，你可能想把jquery代碼放到一個文檔就緒函數中，以便腳本在元素加載後執行。 $（document）.ready（function（）{ .... }）; – 2012-08-13 20:53:19

好的謝謝你的解釋！ – Greg 2012-08-13 20:57:47

在鼠標上改變div的顏色

回答

相關問題