Как можно объединить ссылки?

341

21 декабря 2016, 02:52

Привет! Имеется прайс. Необходимо, чтобы при наведении курсора на название продукта выделялась и цена данного продукта. По отдельности это не сложно сделать, а вот чтобы вместе это работало не знаю как. Вот код:

.name:hover .prise { 
  background: #f3d7ff; 
  border-radius: 5px; 
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px; 
}

<div class="ub-gallery"> 
  <div class="name"><a href="#">Unifi AP</a> 
  </div> 
  <div class="name"><a href="#">UniFi AP LR</a> 
  </div> 
  <a class="" href="images/uap.jpg"> 
    <img src="images/uap.jpg" width="100px" height="100px"> 
  </a> 
  <div class="ub-price price" id="2693">4 540 p.</div> 
  <div class="ub-price price" id="20134">6 170 p.</div> 
  <button class="button">Купить</button> 
</div>

Но ничего не получилось. Вот ссылка на образец

Answer 1

Попробуйте записать как-то так:

div.name, div.ub-price:hover {//здесь все что вам нужно}

Answer 2

Пример для этой разметки на css, но лучше все таки использовать javascript.

.ub-gallery .name:hover:nth-of-type(1) ~ .price, 
.ub-gallery .name:hover:nth-of-type(2) ~ .price + .price, 
.ub-gallery .name:hover:nth-of-type(3) ~ .price + .price + .price, 
.ub-gallery .name:hover:nth-of-type(4) ~ .price + .price + .price + .price, 
.ub-gallery .name:hover:nth-of-type(5) ~ .price + .price + .price + .price + .price { 
  background: #f3d7ff; 
  border-radius: 5px; 
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px; 
} 
.ub-gallery .name:hover:nth-of-type(1) ~ .price ~ .price, 
.ub-gallery .name:hover:nth-of-type(2) ~ .price + .price ~ .price, 
.ub-gallery .name:hover:nth-of-type(3) ~ .price + .price + .price ~ .price, 
.ub-gallery .name:hover:nth-of-type(4) ~ .price + .price + .price + .price ~ .price, 
.ub-gallery .name:hover:nth-of-type(5) ~ .price + .price + .price + .price + .price ~ .price { 
  background: transparent; 
}

<div class="ub-gallery"> 
  <div class="name"><a href="#">Unifi AP</a> 
  </div> 
  <div class="name"><a href="#">UniFi AP LR</a> 
  </div> 
  <div class="name"><a href="#">UniFi AP LR</a> 
  </div> 
  <div class="name"><a href="#">UniFi AP LR</a> 
  </div> 
  <div class="name"><a href="#">UniFi AP LR</a> 
  </div> 
  <a class="" href="images/uap.jpg"> 
    <img src="images/uap.jpg" width="100px" height="100px"> 
  </a> 
  <div class="ub-price price" id="2693">4 540 p.</div> 
  <div class="ub-price price" id="20134">6 170 p.</div> 
  <div class="ub-price price" id="20135">6 170 p.</div> 
  <div class="ub-price price" id="20136">6 170 p.</div> 
  <div class="ub-price price" id="20137">6 170 p.</div> 
  <button class="button">Купить</button> 
</div>

Создание интернет-магазина строительных материалов в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как использовать данные из гугл скрипта при построении диалогового окна

Некий скрипт считывает значения ячеек выделеного диапазона в таблице googleSheetПодскажите, как построить диалоговое окно в котором будет нарисована...

269

HTML