Show and hide buttons when hovering on another div

Question

I would like to change the CSS styling when hovering over a div. But not for the hovered div but rather another div. On hover the other div should be displayed and when not hovering the div, the other div shouldn't be displayed.

This is my code so far but somehow this one is only working while hover on the div input...

This is what I have tried so far:

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

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

Don't be confused by the other css code. This is just there to style the elements! :)

I want to hide the buttons class .lebenslauf_textteil_buttons when not hovering the first div after the li elements. When hovering then show the 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> 

You guys have any idea? Thank you!

Answer 1

I think using javascript is easier than using 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

Here is jQuery solution. :) Dont forget to add 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>