更改文字的颜色，无边框颜色变化

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

更改文字的颜色，无边框颜色变化

回答

相关问题