Jump to content
  • 0

Неправильно работает :hover в GoogleChrome


Kirill M
 Share

Question

Здравствуйте.

 

Столкнулся с такой проблемой. В сверстаном шаблоне некорректно отображаются стили при наведении в Хроме.

Блок "Наши Новости" работает правильно - при наведении на блок меняется цвет фона, при наведении на новость меняется цвет её фона, текста и рамки у img. При наведении на блоки "Новости Alfa" и "Новости дилеров" у меня стили :hover срабатвают ТОЛЬКО при наведении на нижнюю (3-ю) новость.

В других браузерах соответственно всё нормально. Первый раз с таким сталкиваюсь, предположил что дело в новой версии хрома?

Ссылка

 

Кусок кода

<div class="secondlane"> 		   <div class="news_alfa">	    <div class="news_bg">		  		  <div class="news_title">НОВОСТИ ALFA		  </div>	 		  <div class="news_wrap">		     <a href="#" class="news_item">			    <div class="news_item_image"><img src="images/news_1.jpg" alt="">		        </div>				<div class="news_item_title">Кроссовер от Alfa Romeo нарекут Giulietta Cross				</div>			 </a>			     <a href="#" class="news_item">			    <div class="news_item_image"><img src="images/news_4.jpg" alt="">		        </div>				<div class="news_item_title">Маркионне пообещал перемены дочерним брендам концерна FIAT		        </div>		     </a>		     <a href="#" class="news_item">			    <div class="news_item_image"><img src="images/news_2.jpg" alt="">		        </div>				<div class="news_item_title">Alfa Romeo Giulietta и MiTo Quadrifoglio лишились «механики»		        </div>		     </a>	             <a class="link_to_all_news" href="#">ВСЕ НОВОСТИ</a> 			 		  </div>		  		  	    </div><!-- news_bg END --> 	 	   </div><!-- news_alfa END -->	   	   <div class="margin_20">	   </div>	   	   <div class="news_dilers">	   	    <div class="news_bg">		  		  <div class="news_title">НОВОСТИ ДИЛЕРОВ		  </div>	 		  <div class="news_wrap">		     <a href="#" class="news_item">			    <div class="news_item_image"><img src="images/news_3.jpg" alt="">		        </div>				<div class="news_item_title">Новый дилер Alfa Romeo в России не смог порадовать ценами				</div>			 </a>			     <a class="news_item">			    <div class="news_item_image"><img src="images/news_2.jpg" alt="">		        </div>				<div class="news_item_title">Alfa Romeo Giulietta и MiTo Quadrifoglio лишились «механики»		        </div>		     </a>			     <a href="#" class="news_item">			    <div class="news_item_image"><img src="images/news_1.jpg" alt="">		        </div>				<div class="news_item_title">Маркионне пообещал перемены дочерним брендам концерна FIAT		        </div>		     </a>		     <a class="link_to_all_news" href="#">ВСЕ НОВОСТИ</a>		  </div>		  	    </div><!-- news_bg END --> 	  	   </div><!-- news_dilers END -->	   	   <div class="margin_20">	   </div>	   <div class="news_our">	    <div class="news_bg">		  		  <div class="news_title">НАШИ НОВОСТИ		  </div>	 		  <div class="news_wrap">		     <a href="#" class="news_item">			    <div class="news_item_image"><img src="images/news_3.jpg" alt="">		        </div>				<div class="news_item_title">Новый дилер Alfa Romeo в России не смог порадовать ценами				</div>			 </a>			     <a class="news_item">			    <div class="news_item_image"><img src="images/news_1.jpg" alt="">		        </div>				<div class="news_item_title">Alfa Romeo Giulietta и MiTo Quadrifoglio лишились «механики»		        </div>		     </a>			     <!--a href="#" class="news_item">			    <div class="news_item_image"><img src="images/news_2.jpg" alt="">		        </div>				<div class="news_item_title">Маркионне пообещал перемены дочерним брендам концерна FIAT		        </div>		     </a-->		 		  </div>		  	    </div><!-- news_bg END --> 	 	   	   </div><!-- news_our END -->	       </div> <!-- secondlane-->	 

 

CSS:

/* ***  secondlane  *** */.news_alfa, .news_dilers, .news_our{ float : left;  width : 320px;  height : 400px;  height : 380px;    background-repeat : no-repeat;}.news_alfa { background-image : url(images/back_bg_1.jpg); }.news_dilers{ background-image : url(images/back_bg_2.jpg); }.news_our{ background-image : url(images/back_bg_3.jpg); background-position : 0 -140px; }.news_bg /* фон для блока */{ display : absolute;  float : left;  width : 320px;  height : 400px;  height : 380px;  background : #555;  background : rgba(16,16,16,0.85);  transition : background 0.6s;}.news_title /* заголовок блока */{ float : left;  clear : both;  width  : 310px;   margin : 0 5px;  height : 50px;     color : #fff;	      font  : bold italic  18px/54px "PT Sans";        text-align : center;	   border-bottom : 2px solid #fff;	 }.news_wrap    /* белый фон */{ float : left;  clear : both;  width  : 310px;  margin : 10px 5px 1px 5px;   height : 310px;   background : #fff;}.news_item /* обертка новости */{ float : left;  width : 100%;  background : #fff;   margin : 20px 0 0 0;  transition : background 0.6s;  }.news_item_image{ float : left;   clear : both;  width : 120px;}.news_item_image IMG{ float : left;  border : 1px solid #ccc;  transition : border 0.6s;}.news_item_title{ float : left;   max-width : 180px;  padding : 5px;     color : #333;     font  : 18px/19px "Open Sans Condensed";    transition : color : 0.6s;}.news_bg:hover{ background : rgba(16,16,16,1); background : #333;  }.news_item:hover{ background : #555; }.news_item:hover .news_item_title{ color : #fff;}.news_item:hover .news_item_image IMG{ border : 1px solid #555;}
Link to comment
Share on other sites

2 answers to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy