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代码混淆。这就是样式的元素！：）

当不将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>

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

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>

Answer 2

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

df.createOrReplaceTempView("temp_table_1")
sparkSession.sql("select col1 from (select ROW_NUMBER() OVER (ORDER BY col1) AS id, col1 from temp_table_1) y where id%(SOME_INTERVAL) = 0 order by col1").show()

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

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

2 个答案: