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

Question

我想在将鼠标悬停在 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 代码搞糊涂了。这只是用来设置元素样式的! :)

我想隐藏按钮类 .lebenslauf_textteil_buttons，而不是将第一个 div 悬停在 li 元素之后。悬停时显示按钮!

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

你们有什么想法吗？ 谢谢!

Answer 1

我认为使用 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>