Hello! There is a price. It is necessary that when you hover the cursor on the product name, the price of this product should also be highlighted. Separately, it’s not difficult to do, but I’m not sure how. Here is the code:

.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>

But nothing happened. Here is a link to the sample.

    2 answers 2

    Try to write something like this:

     div.name, div.ub-price:hover {//здесь все что вам нужно}
    • not, it turns out that hover is used for ub-price only, and the 1st div accepts changes ((( - Sasha
    • @Sasha on the site of the example is done with the help of JS. - ThusMad
    • thank! I will seek a solution in js - Sasha
    • @Sasha there when you hover on one div changes the style of another. For example, without pointing q9 after pointing q9 s . - Thus Mad

    An example for this markup on css, but it's better to still use 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>

    • Soledar10, thanks for your time! I will decide with the help of js) - Sasha