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;
}

但出于学习目的，你的原因是＆＃34; Border＆＃34;改变颜色是因为它不是一个边框，它是一个盒子阴影，你还没有设置框阴影的颜色。如果您想继续使用jQuery进行学习，那么执行下面的代码也可以解决您的问题。

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

Answer 3

将此行添加到您的css：

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

更改文本颜色而不更改边框颜色

3 个答案: