Question

因此，我一直在尝试创建一个小型网站，将鼠标悬停在导航栏上时可以突出显示div。我这样做的目的是，当我将整个导航栏悬停时，div的透明度变为0.3，但是我希望当我将导航栏的3个内容中的1悬停时，它的透明度变为0.3。

我已将我的代码放在https://jsfiddle.net/qjk0cpse/1/中，以便您可以检查我的代码。预先感谢！

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

不幸的是，由于没有父选择器，因此CSS无法做到这一点，并且您要采用的“路径”仅向上（到达父路径）一次。您的CSS代码是最不用JavaScript就能获得的代码。

JavaScript解决方案要求将事件侦听器附加到项目并更改.game元素的样式。

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'
    })
})

这是小提琴：https://jsfiddle.net/obpq7rte/

Answer 2

您可以尝试通过将nav元素置于其容器之外来更改HTML结构，以便能够使用~选择器。

这是一个主意（您可能需要使用媒体查询来调整小屏幕的按钮）

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>

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

2 个答案: