javascript - 悬停在另一个div上时显示和隐藏按钮

将鼠标悬停在div上时，我想更改CSS样式。但不是为徘徊的div，而是另一个div。悬停时，应显示另一个div，当不悬停div时，不应显示另一个div。

到目前为止，这是我的代码，但不知何故，此代码仅在将鼠标悬停在div输入上时才起作用...

到目前为止，这是我尝试过的：

.lebenslauf_rubrik li div + .lebenslauf_textteil_buttons
{
    display: none!important;
}

.lebenslauf_rubrik li div:hover + .lebenslauf_textteil_buttons
{
    display: block!important;
}

不要被其他CSS代码弄糊涂了。这就是样式元素的样式！ :)

当我不在li元素后的第一个div上悬停时，我想隐藏按钮类.lebenslauf_textteil_buttons。悬停时，请显示按钮！

.lebenslauf_textteil_zeile {
  display: inline-block;
  width: 100%;
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 5px;
  border: 1px solid orange;
}

.lebenslauf_textteil_zeile div:nth-child(1) {
  margin-right: 10px;
  float: left;
  z-index: 10;
  width: 150px;
  max-width: 160px;
  white-space: nowrap;
}

.lebenslauf_textteil_zeile div:nth-child(2) {
  float: left;
  z-index: 10;
  width: 365px;
  max-width: 375px;
  white-space: nowrap;
}

.lebenslauf_rubrik li:first-child .sortable_eins_hoch {
  color: white !important;
  background-color: white;
  pointer-events: none !important;
}

.lebenslauf_rubrik li:last-child .sortable_eins_runter {
  color: white !important;
  background-color: white;
  pointer-events: none !important;
}

.lebenslauf_textteil_buttons {
  float: right;
  width: 240px;
  max-width: 260px;
  white-space: nowrap;
}

.lebenslauf_sortieren_button {
  padding: 6px 13.5px !important;
}

.lebenslauf_rubrik {
  padding: 0px !important;
  list-style-type: none !important;
}

.lebenslauf_rubrik li div+.lebenslauf_textteil_buttons {
  display: none!important;
}

.lebenslauf_rubrik li div:hover+.lebenslauf_textteil_buttons {
  display: block!important;
}

<ul class="lebenslauf_rubrik">
  <li id="li_1_19">
    <div id="zeile_1_19" class="lebenslauf_textteil_zeile" style="z-index: 15;">
      <div id="input_1_19" class="lebenslauf_textteil_input" contenteditable="true">Name</div>
      <div id="input_1_20" class="lebenslauf_textteil_input" contenteditable="true">Max Mustermann</div>

      <div class="lebenslauf_textteil_buttons">
        <input type="button" class="w3-btn" value="löschen">
        <input type="button" class="w3-btn" value="kopieren">
        <input type="button" class="w3-btn lebenslauf_sortieren_button sortable_eins_hoch" value="▲">
        <input type="button" class="w3-btn lebenslauf_sortieren_button sortable_eins_runter" value="▼">
      </div>
    </div>
  </li>

  <li id="li_1_19">
    <div id="zeile_1_21" class="lebenslauf_textteil_zeile" style="z-index: 15;">
      <div id="input_1_21" class="lebenslauf_textteil_input" contenteditable="true">Name</div>
      <div id="input_1_22" class="lebenslauf_textteil_input" contenteditable="true">Ralf</div>

      <div class="lebenslauf_textteil_buttons">
        <input type="button" class="w3-btn" value="löschen">
        <input type="button" class="w3-btn" value="kopieren">
        <input type="button" class="w3-btn lebenslauf_sortieren_button sortable_eins_hoch" value="▲">
        <input type="button" class="w3-btn lebenslauf_sortieren_button sortable_eins_runter" value="▼">
      </div>
    </div>
  </li>
</ul>

你们有什么主意吗？
谢谢！

最佳答案

我认为使用JavaScript比使用CSS更容易。

js：

function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

的HTML：

<button onmouseover="myFunction()" onmouseleave="myFunction()">Click Me</button>
<div id="myDIV">
    This is my DIV element.
</div>

关于javascript - 悬停在另一个div上时显示和隐藏按钮，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51440007/