CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jamie Theophilos
Jamie Theophilos

Reputation: 93

change color of text without border color changing

I have a div that includes css of a box/border around it. I want to be able to change the color of the text (when hovered over) without the color of the border changing. I am trying to figure out a way to do it within jQuery but I have had no luck finding anything/figuring it out.

Here is some code that I have thus far. thanks.

$('#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>

Upvotes: 2

Views: 350

Answers (3)

Arlind Hajredinaj
Arlind Hajredinaj

Reputation: 8519

Add this line to your css:

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

Upvotes: 0

Enjayy
Enjayy

Reputation: 1074

Yes you can simple do that with css 

#container:hover {
 color: blue;
}

But for learning purposes the reason your "Border" is changing colors is because it is not a border it is a box-shadow and you have not sett the color of the box shadow. Doing the code below will fix your problem as well if you want to continue using jQuery for learning purposes.

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

Upvotes: 2

floribon
floribon

Reputation: 19193

Do not use jQuery for that. Simply add the following CSS:

#container:hover {
  color: blue;
}

Upvotes: 3

Related Questions