更改文字的顏色，無邊框顏色變化

我有一個div，其中包括圍繞它的框/邊框的CSS。我希望能夠在不改變邊框顏色的情況下更改文字的顏色（當懸停時）。我試圖找出一種方法來在jQuery中做到這一點，但我沒有找到任何東西/找出它的運氣。更改文字的顏色，無邊框顏色變化

這是我迄今爲止的一些代碼。謝謝。

$('#container').hover(function() { 
 
    $(this).css('color', 'blue'); 
 
    }, 
 
    function() { 
 
    $(this).css('color', 'black'); 
 
    });

body { 
 
    /* background-color: #000000; */ 
 
} 
 
#container { 
 
    background: #eeeeee; 
 
    width: 330px; 
 
    height: 220px; 
 
    /* margin-top: 350px; */ 
 
    /* margin-left: 700px; */ 
 
    border: 1px solid #000000; 
 
    border-top: 5px solid #000000; 
 
    border-top-left-radius: .5em; 
 
    border-top-right-radius: .5em; 
 
    opacity: .7; 
 
    text-align: center; 
 
    z-index: 4; 
 
    position: fixed; 
 
    box-shadow: 8px 8px 2px; 
 
    overflow: hidden; 
 
    font-family: 'Courier New', Courier, monospace; 
 
    cursor: pointer; 
 
    font-size: 15px; 
 
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> 
 

 
<div id="container">here is some text where I want the color of the text to change when hovered over but not the border around the text as well</div>

來源

2015-03-30 Jamie Theophilos

改變文本的顏色不應該有邊界的任何影響。你有什麼問題？ – Barmar 2015-03-31 00:04:37

正如Barmar所說，問題不在於邊界。你的盒子陰影沒有定義的顏色，所以它從顏色繼承。嘗試爲你的盒子陰影定義一種顏色，它會起作用：box-shadow：8px 8px 2px＃000; – thebreiflabb 2015-03-31 00:07:53

'box-shadow'：「如果未指定，則使用的顏色取決於瀏覽器 - 它通常是color屬性的值，但請注意Safari在當前情況下繪製了透明陰影。」 - [MDN]（https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow） – showdev 2015-03-31 00:08:48

不要使用jQuery了點。只需添加以下CSS：

#container:hover { 
    color: blue; 
}

來源

2015-03-31 00:03:10 floribon

是的，你可以簡單的做到這一點與CSS

#container:hover { 
color: blue; 
}

但出於學習目的的「邊界」正在改變顏色的原因是因爲它不是一個邊界是一個箱子陰影，你還沒有設置箱子陰影的顏色。如果你想繼續使用jQuery進行學習，下面的代碼將解決你的問題。

box-shadow: 8px 8px 2px black;

來源

2015-03-31 00:10:05 Enjayy

此行添加到你的CSS：

box-shadow: 8px 8px 2px red;

來源

2015-03-31 00:12:43 Arlind

更改文字的顏色，無邊框顏色變化

回答

相關問題