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

【问题标题】：Show and hide buttons when hovering on another div悬停在另一个 div 上时显示和隐藏按钮
【发布时间】：2018-07-20 09:59:22
【问题描述】：

我想在将鼠标悬停在 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>

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

【问题讨论】：

向li 元素添加一个鼠标悬停侦听器，这将为您要显示的按钮添加一个类，并为删除该类和您在该类中的样式添加一个鼠标悬停侦听器。这样，这种样式只会在悬停 li 元素时应用。
“但不知何故，这个只有在将鼠标悬停在 div 输入上时才有效” - .lebenslauf_textteil_buttons 是您的 .lebenslauf_textteil_input 元素的兄弟，所以它按设计工作。 “当不悬停在 li 元素之后的第一个 div 时。” - 如果元素之间的关系实际上不是兄弟，那么不要使用兄弟组合器关系，而是父/子关系。
我想。 Javascript 适合这类问题。
谢谢伙计，现在工作。只需要删除 css 中的 +

标签： javascript html css hover display

【解决方案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>

【讨论】：

那么如何将函数与类而不是 id 一起使用？
使用 getElementsByClassName 而不是 getElementById 或者你可以使用 toggle("class_name")

【解决方案2】：

这里是 jQuery 解决方案。 :) 不要忘记添加 jQuery。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

$("ul.lebenslauf_rubrik li .lebenslauf_textteil_zeile").mouseenter(function() {
  $(this).children(".lebenslauf_textteil_buttons").show();
})

$("ul.lebenslauf_rubrik li .lebenslauf_textteil_zeile").mouseleave(function() {
  $(this).children(".lebenslauf_textteil_buttons").hide();
})

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

【讨论】：