悬停一个元素以更改另一个元素的属性

Question

So I've been trying to do this little website where I can highlight my divs when I hover my navigation bar. I made it so that my div gets to 0.3 opacity when i hover my whole navigation bar, but I want it to only get to 0.3 opacity when i hover the 1 of the 3 content of the navigation bar.

I've put my code in https://jsfiddle.net/qjk0cpse/1/ for you to be able to check ot my code. Thanks in advance!

HTML:

<div class="navbar">
    <div class="navbar-list">Spela!</div>
    <div class="navbar-list">Bakgrundsinformation</div>
    <div class="navbar-list">Information</div>
</div>

CSS:

.navbar:hover ~.game{
    opacity:0.3;
}

Answer 1

This is unfortunately not possible to do with CSS since there is no parent selector, and the "path" you want to take goes upwards (to the parent) once. Your CSS code is the closest you can get without using JavaScript.

A JavaScript solution requires attaching event listeners to the items and changing the style of the .game element.

const items = document.querySelectorAll('.navbar-list')

Array.prototype.forEach.call(items, item => {
  item.addEventListener('mouseenter', () => {
      document.querySelector('.game').style.opacity = '.3'
    })
  item.addEventListener('mouseleave', () => {
      document.querySelector('.game').style.opacity = '1'
    })
})

And here's the fiddle: https://jsfiddle.net/obpq7rte/

Answer 2

You can try to change your HTML structure by making the nav element outside their container in order to be able to use the ~ selector.

Here is an idea (you may need to adjust of the button for small screen using media query)

 body { margin: 0; padding: 0; font-family: Arial; } #people { list-style: none; padding: 0; margin-top: -10px; font-size: 12px; } #people li { display: inline; } #economy { display: block; position: relative; padding-left: 0; border: black 1px solid; list-style: none; text-align: center; } .people-center { position: relative; display: center; text-align: center; } #economy li { margin-bottom: 1px; } .fieldset { border-style: none; } button { margin: 30px 25px 0 0; padding: 10px 15px; } .navbar { background-color: grey; position: fixed; width: 100%; z-index: 98; height: 60px; } .navbar-list { background-color: white; position: fixed; padding: 15px 30px; opacity: 0.3; transition: 0.3s; border-radius: 20px; text-align: center; z-index: 99; top: 5px; } .one { left: 5%; } .three { right: 5%; } .two { left: 50%; transform: translateX(-50%); } .navbar-list:hover { opacity: 1; background-color: #D3D3D3; border-radius: 10px; color: white; } .picture { text-align: center; } .bilden { width: 100%; height: 400px; overflow: hidden; position: relative; padding: 0; } .textbild { position: absolute; top: 200px; right: 50%; transform: translate(50%, -50%); color: #D3D3D3; font-size: 64px; border-bottom: 4px dashed #D3D3D3; font-family: Impact, Charcoal, sans-serif; } .game { background-color: #D3D3D3; float: left; text-align: center; margin-left: 10px; border-radius: 50px; border: 5px solid grey; transition: 0.3s; } .acre-picture { width: 25px; border-radius: 1000px; } .acre { position: relative; float: left; margin: 5px; padding: 5px; border: 1px solid black; text-align: center; } #starved, #newcomers, #population { padding: 5px; border-bottom: 2px solid black; border-top: 2px solid black; } #minusbuttonAcrestosellbuy, #minusbuttonFeedpeople, #minusbuttonPlantwithseed { border-radius: 10px; width: 50px; height: 30px; transition: 0.1s; background-color: grey; border: 0; color: red; font-size: 32px; line-height: 30px; } #plusbuttonAcrestosellbuy, #plusbuttonFeedpeople, #plusbuttonPlantwithseed { border-radius: 10px; width: 50px; height: 30px; transition: 0.1s; background-color: grey; border: 0; color: green; font-size: 32px; line-height: 30px; } #minusbuttonAcrestosellbuy:hover, #plusbuttonAcrestosellbuy:hover, #minusbuttonFeedpeople:hover, #plusbuttonFeedpeople:hover, #minusbuttonPlantwithseed:hover, #plusbuttonPlantwithseed:hover { opacity: 0.5; width: 55px; } .fieldset { min-width: 300px; } .btn { border: 2px solid black; background-color: grey; border-radius: 2px; margin-bottom: 15px; } .information { margin-left: 10px; float: left; background-color: #D3D3D3; border-radius: 50px; border: 5px solid grey; max-width: 230px; } .info-bild { width: 200px; } .info-text { padding: 10px; padding-bottom: 21px; font-size: 10px; } .one:hover~.game { opacity: 0.3; } .three:hover~.information { opacity: 0.3; } 

 <div class="navbar"></div> <div class="navbar-list one">Spela!</div> <div class="navbar-list two">Bakgrundsinformation</div> <div class="navbar-list three">Information</div> <!--<div class="navbar-list">4</div>--> <div class="picture"> <img class="bilden" src="image.jfif"> <span class="textbild">Hammurabi</span> </div> <div class="game"> <h2 id="year">The report for year:</h2> <ul id="people"> <li id="starved">Starved:</li> <li id="newcomers">Newcomers:</li> <li id="population">Population:</li> </ul> <div class="people-center"> <ul id="economy"> <div class="acre"> <img class="acre-picture" src="acre.jfif"> <li id="acres">Acres:</li> </div> <div class="acre"> <img class="acre-picture" src="acre.jfif"> <li id="bushels">Bushels:</li> </div> <div class="acre"> <img class="acre-picture" src="acre.jfif"> <li id="harvest">Harvest:</li> </div> <div class="acre"> <img class="acre-picture" src="acre.jfif"> <li id="rats">Rats:</li> </div> <div class="acre"> <img class="acre-picture" src="acre.jfif"> <li id="price">Price:</li> </div> </ul> </div> <form> <fieldset class="fieldset"> <legend>Acres to sell / buy <span id="outputAcrestosellbuy"></span></legend> <input type="button" value="-" id="minusbuttonAcrestosellbuy" onclick="onChangeAcres('minusbuttonAcrestosellbuy');"> <input type="range" id="sliderAcrestosellbuy" onchange="onChangeAcres('sliderAcrestosellbuy');"> <input type="button" value="+" id="plusbuttonAcrestosellbuy" onclick="onChangeAcres('plusbuttonAcrestosellbuy');"> </fieldset> <fieldset class="fieldset"> <legend>Feed people <span id="outputFeedpeople"></span></legend> <input type="button" value="-" id="minusbuttonFeedpeople" onclick="onChangeFeeding('minusbuttonFeedpeople');"> <input type="range" id="sliderFeedpeople" onchange="onChangeFeeding('sliderFeedpeople');"> <input type="button" value="+" id="plusbuttonFeedpeople" onclick="onChangeFeeding('plusbuttonFeedpeople');"> </fieldset> <fieldset class="fieldset"> <legend>Plant with seed <span id="outputPlantwithseed"></span></legend> <input type="button" value="-" id="minusbuttonPlantwithseed" onclick="onChangePlanting('minusbuttonPlantwithseed');"> <input type="range" id="sliderPlantwithseed" onchange="onChangePlanting('sliderPlantwithseed');"> <input type="button" value="+" id="plusbuttonPlantwithseed" onclick="onChangePlanting('plusbuttonPlantwithseed');"> </fieldset> <button class="btn" type="button" onclick="gameStart();">Restart</button> <button class="btn" type="button" onclick="finishTurn();">So be it!</button> <button class="btn" type="button">Help</button> </form> </div> <div class="information"> <img class="info-bild" src="hammurabi.png"> <div class="info-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus hendrerit nunc ipsum, pretium dictum sem rutrum sit amet. Sed elementum est nec aliquet luctus. In pellentesque, odio quis eleifend sollicitudin, sapien felis dapibus lacus, tempus hendrerit leo erat non ipsum. Proin commodo fermentum augue sit amet rutrum. Morbi efficitur fermentum porttitor. Quisque ut tristique quam. Donec fermentum ultrices lobortis. Integer venenatis suscipit diam, gravida auctor elit consectetur in. Morbi ultrices leo in mi faucibus, ut lacinia nisl viverra. Curabitur dignissim nisi enim, sit amet tincidunt sem ornare eget. </div> </div>