keep current CSS value in variable without changing

Question

I'm trying to keep current CSS value of an element in a variable. My problem is whenever I change style of original element, the value in variable which I've assigned before changes too.

var currentColor;

$("tr").hover(function () {
    currentColor = $(this).css("background-color");
    $(this).css("background-color", "#f7f7f7")
}).mouseout(function () {
    $(this).css("background-color", currentColor);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr style="background-color:#FF0000"><td>Foo</td></tr>
    <tr style="background-color:#00FF00"><td>Foo</td></tr>
    <tr style="background-color:#0000FF"><td>Foo</td></tr>
</table>

I also tried to use .data() but it didn't solve my problem.

var currentColor;

$("tr").hover(function () {
    $("div").data("currentColor", $(this).css("background-color"));
    $(this).css("background-color", "#f7f7f7")
}).mouseout(function () {
    $(this).css("background-color", $("div").data("currentColor"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr style="background-color:#FF0000"><td>Foo</td></tr>
    <tr style="background-color:#00FF00"><td>Foo</td></tr>
    <tr style="background-color:#0000FF"><td>Foo</td></tr>
</table>

UPDATE

Since community ask me why I haven't use tr:hover {background:color} I would have to include that in my actual project, and in that particular case I were into a situation that I had to modify back-ground color using jQuery. After that tr:hover {background:color} don't work and you have to manage tr:hover functionality with jQuery too.

I excluded that part from my question because I thought its not necessary to explain it.

out of my curiosity, why are you using jQuery to change the background colour on hover? in CSS it's just tr:hover { background : #f7f7f7; } — Fabrizio Calderan
– Fabrizio Calderan, Commented May 15, 2018 at 8:05
@fcalderan because once you use $("tr").css("background-color", "some color"), after that tr:hover { background : #f7f7f7; } don't work. — Masoud Keshavarz
– Masoud Keshavarz, Commented May 15, 2018 at 8:13
I would recommend you to learn HTML & CSS if you have just started working in the front-end. — shibualexis
– shibualexis, Commented May 15, 2018 at 8:13
All I see from your code is that your rows have a background-colour that change when they are hovered. If there's nothing more and no specific reason to use js, then CSS is the way. — Fabrizio Calderan
– Fabrizio Calderan, Commented May 15, 2018 at 8:21
I am sorry if my comment offended you. Didn't mean to insult you. Since you have hard-coded the color #f7f7f7 in your mouseover event, I strongly believe it could be handled in CSS itself. In your case there is no need of JQuery or Javascript itself. I have also seen many recommending the same solution. — shibualexis
– shibualexis, Commented May 15, 2018 at 8:32

Carsten Løvbo Andersen · Accepted Answer · 2018-05-15 08:12:22Z

5

Use this code:

$("tr").mouseenter(function() {
  $(this).attr("currentColor", $(this).css("background-color"));
  $(this).css("background-color", "#f7f7f7")
}).mouseout(function() {
  $(this).css("background-color", $(this).attr("currentColor"));
});

I don't know why you are using $("div") since you have no div in your HTML.

Second, use mouseenter and not hover

jQuery Demo

$("tr").mouseenter(function() {
  $(this).attr("currentColor", $(this).css("background-color")).css("background-color", "#f7f7f7")
}).mouseout(function() {
  $(this).css("background-color", $(this).attr("currentColor"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr style="background-color:#FF0000">
    <td>Foo</td>
  </tr>
  <tr style="background-color:#00FF00">
    <td>Foo</td>
  </tr>
  <tr style="background-color:#0000FF">
    <td>Foo</td>
  </tr>
</table>

Css Way demo

table tbody tr:hover td {
  background-color: #f7f7f7;
}

<table>
  <tr style="background-color:#FF0000">
    <td>Foo</td>
  </tr>
  <tr style="background-color:#00FF00">
    <td>Foo</td>
  </tr>
  <tr style="background-color:#0000FF">
    <td>Foo</td>
  </tr>
</table>

edited May 15, 2018 at 8:12

answered May 15, 2018 at 8:06

Carsten Løvbo Andersen

27.1k10 gold badges53 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Masoud Keshavarz Over a year ago

Much appreciated

Carsten Løvbo Andersen Over a year ago

@MasoudKeshavarz No problem happy to help

Masoud Keshavarz Over a year ago

Why CSS demo? My question is clear keep current CSS value in variable for later use. I never asked How can I do this with CSS? :(

Carsten Løvbo Andersen Over a year ago

I added it to be nice, I never said you had to use it. Other might want to use it.

לבני מלכה · Accepted Answer · 2018-05-15 08:09:16Z

1

you can do it with PURE CSS

td:hover{
background-color:#f7f7f7;
}

<table>
  <tr style="background-color:#FF0000">
    <td>Foo</td>
  </tr>
  <tr style="background-color:#00FF00">
    <td>Foo</td>
  </tr>
  <tr style="background-color:#0000FF">
    <td>Foo</td>
  </tr>
</table>

Here you can find explain :hover in css:https://www.w3schools.com/cssref/css_selectors.asp

answered May 15, 2018 at 8:09

לבני מלכה

16.3k2 gold badges26 silver badges48 bronze badges

3 Comments

Masoud Keshavarz Over a year ago

I know, but once you change background with jQuery for example using $("tr").css("background-color", "some color"), after that tr:hover { background : #f7f7f7; } don't work.

Fabrizio Calderan Over a year ago

please specify what do you mean with "after that". Are you mixing css and javascript together?

Masoud Keshavarz Over a year ago

@לבנימלכה please read my update. I am sorry because I didn't explain it earlier. I thought it is not necessary.

Collectives™ on Stack Overflow

keep current CSS value in variable without changing

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related