CODEWITHSUNDEEP
jquerycss
Masoud Keshavarz
Masoud Keshavarz

Reputation: 2234

keep current CSS value in variable without changing

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.

Upvotes: 0

Views: 342

Answers (2)

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

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>

Upvotes: 5

לבני מלכה
לבני מלכה

Reputation: 16251

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

Upvotes: 1

Related Questions