JSFiddle - React, Tailwind, and code Playground

by bohdantheone

HTML

<div style="background: #1c1c1c">
<div class="best_news"> <div class="best_news_l"><a href="/blog/gora_samocvetov_podarochnoe_izdanie_54_serii_iz_54_2004_2010_ru_dvdrip/2012-01-16-425" title="Гора самоцветов: Подарочное издание / 54 серии из 54 / 2004-2010"><img src="http://kinouser.ru/_bl/4/33977452.jpg" alt=""></a></div><a href="/blog/gora_samocvetov_podarochnoe_izdanie_54_serii_iz_54_2004_2010_ru_dvdrip/2012-01-16-425" title="Гора самоцветов: Подарочное издание / 54 серии из 54 / 2004-2010"> </a><a href="/blog/gora_samocvetov_podarochnoe_izdanie_54_serii_iz_54_2004_2010_ru_dvdrip/2012-01-16-425" title="Гора самоцветов: Подарочное издание / 54 серии из 54 / 2004-2010"></a><a href="/blog/gora_samocvetov_podarochnoe_izdanie_54_serii_iz_54_2004_2010_ru_dvdrip/2012-01-16-425">Гора самоцветов: Подарочное издание / 54 серии из 54 / 2004-2010<br></a>  </div>
</div>
<script>
$(document).ready(function(){
    $("div.best_news").mouseover(function(){
      $("a:link").addClass('best_news_h');});
    $("div.best_news").mouseleave(function(){
      $("a:link").removeClass('best_news_h');});
   
    });
    
</script>

CSS

.best_news a:link{color:#fff}
.best_news{
width: 152px;
height: 130px;
overflow: hidden;
position: relative;
margin: 7px 0 0 11px;
padding: 3px;
border-radius: 3px;
-moz-box-shadow: inset 5px 5px 10px #f0f0f0;
-ms-box-shadow: 0 1px 2px #CCC;
-webkit-box-shadow: 5px 5px 10px #000;
box-shadow: 0 1px 2px #CCC;
}

.best_news_l {
width: 150px;
height: 86px;
overflow: hidden;
position: relative;
margin: 0 0 0 1px;
}
.best_news_r {
width: 130px;
height: 32px;
overflow: hidden;
font-size: 12px;
line-height: 17px;
margin-top: -1px;
}
ackground: white;
-moz-box-shadow: 0 1px 2px #CCC;
-ms-box-shadow: 0 1px 2px #CCC;
-webkit-box-shadow: 0 1px 2px #CCC;
box-shadow: 0 1px 2px #CCC;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-transition: background-color .18s;
-ms-transition: background-color .18s;
-o-transition: background-color .18s;
-webkit-transition: background-color .18s;
transition: background-color .18s;
}
.best_news_r {
width: 130px;
height: 32px;
overflow: hidden;
font-size: 12px;
line-height: 17px;
margin-top: -1px;
}
.best_news:hover {
background: white;
-moz-box-shadow: 0 1px 2px #CCC;
-ms-box-shadow: 0 1px 2px #CCC;
-webkit-box-shadow: 0 1px 2px #CCC;
box-shadow: 0 1px 2px #CCC;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-transition: background-color .18s;
-ms-transition: background-color .18s;
-o-transition: background-color .18s;
-webkit-transition: background-color .18s;
transition: background-color .18s;
    
}
.best_news_h {color:#000 !important;}