keep current CSS value in variable without changing

55
May 15, 2018, at 3:40 PM

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.

Answer 1

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>

Answer 2

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

READ ALSO
PHP YII2 app won’t stop

PHP YII2 app won’t stop

Yii::$app->end(); This is what I use to stop the app,but it won’t stop,after this sentence,it continues to run this controller againshould this be normal?

39
PHP get multilanguage data from database with instant variables

PHP get multilanguage data from database with instant variables

What I would like is to store every word / sentence /

23
Parse JSON without relying on order

Parse JSON without relying on order

I have this JSON, I'm parsingI can retrieve all the values of field_data in order in PHP, but I need to traverse and get the values I wan't by specifying the field name, without concern for order:

60
Trying to get PHP XDebug working with Visual Studio Code

Trying to get PHP XDebug working with Visual Studio Code

I followed the tutorial here: http://wwwaccella

50