更改文本顏色而無需更改邊框顏色

Question

我有一個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> 

Answer 1

不要為此使用jQuery。 只需添加以下CSS ：

#container:hover {
  color: blue;
}

Answer 2

是的，您可以使用CSS輕松做到這一點

#container:hover {
 color: blue;
}

但是出於學習目的，“邊框”更改顏色的原因是因為它不是邊框，而是框陰影，並且您尚未設置框陰影的顏色。 如果您想繼續使用jQuery進行學習，則執行以下代碼也可以解決您的問題。

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

Answer 3

將此行添加到您的css：

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