There is a block of news material that is all active and click on it should transfer to the news itself.

In addition to this, there are links to news and other elements in the block.

So, how can you make it so that when you hover over a block, all links become active? And when you hover on other elements, this activity disappeared?

Here is an example, when you hover over a block, the link becomes active, but you need to make sure that when you hover over a button, this activity disappears

https://jsfiddle.net/xx9q1haa/

a { color: red; text-decoration: none; } a:hover { color: #000; text-decoration: underline; } div.main { width: 300px; height: 300px; position: relative; background: #fff; cursor: pointer; } div.main:hover a { color: #000; text-decoration: underline; } button { position: absolute; bottom: 0; left: 0; } 
 <div class="main"> <div> <a href="">Ссылка</a> </div> <div> <button>Кнопка</button> </div> </div>

    1 answer 1

     a { color: red; text-decoration: none; } a:hover { color: #000; text-decoration: underline; } div.main { width: 300px; height: 300px; position: relative; background: #fff; cursor: pointer; } div.main:hover a { color: #000; text-decoration: underline; } button { position: absolute; bottom: 0; left: 0; } div.main:hover .main-item-button:hover ~ .main-item-group-link a { color: red; text-decoration: none; } 
     <div class="main"> <div class="main-item-button"> <button>Кнопка</button> </div> <div class="main-item-group-link"> <a href="">Ссылка</a> </div> </div>

    • And if the structure is more complicated? Buttons and links are embedded in n blocks that may change - Fangog