Making an Element Visible by Hovering Another Element (Without :Hover-Property)

Making an element visible by hovering another element (without :hover-property)

You could use the sibling selector. As long as div's share the same parent, you can still affect them with hover

DEMO

Vital Code:

#gestaltung_cd:hover ~ #mainhexa1,
#gestaltung_illu:hover ~ #mainhexa2,
#gestaltung_klassisch:hover ~ #mainhexa3 {
    display: block;
}

Using only CSS, show div on hover over another element

You can do something like this:

div {    display: none;}    a:hover + div {    display: block;}

<a>Hover over me!</a><div>Stuff shown on hover</div>

How to affect other elements when one element is hovered

If the cube is directly inside the container:

#container:hover > #cube { background-color: yellow; }

If cube is next to (after containers closing tag) the container:

#container:hover + #cube { background-color: yellow; }

If the cube is somewhere inside the container:

#container:hover #cube { background-color: yellow; }

If the cube is a sibling of the container:

#container:hover ~ #cube { background-color: yellow; }

Hide element on hover of another element

Instead of + you want to use ~ combinator for hide element because + selects only next-sibling

#show {  display: none}#main:hover + #show {  display: block}#main:hover ~ #hide {  display: none}

<div id="main">  Hover me</div><div id="show">  Show me on hover</div><div id="hide">  Hide me on hover</div>

Changing property of an element on hover of another element after it

A solution is to inverse the order visually and keep the order in the DOM so that you can still use the + selector.

Here is an example with flex:

.wrapper {  display:flex;  flex-direction:column;}
.box, .box-2 {  display: block;  height: 100px;  width: 100px;  margin: 20px;}
.box {  background-color: red;}
.box-2 {  background-color: blue;  order:2; /* this will make box-2 goes after */}
.box-2:hover + .box {  background-color: green;}

<body><div class="wrapper">   <div class="box-2"></div>  <div class="box"></div></div></body>

Show element on hover but keep it visible if hovering over it

You can do it like this--

$('#link-level-1').on('mouseover',function(){  $('#menu-2-level').show('slow');})$('#menu-2-level').on('mouseleave',function(){  $('#menu-2-level').hide('slow');})

#menu-2-level{display:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><nav>  <ul id='level-1-menu'>    <li>       <a id='link-level-1' href='#'> Link</a>       <ul id='menu-2-level'>          <li>first</li>          <li>second</li>          <li>third</li>       </ul>    </li>  </ul></nav>

How to trigger div visibility when hovering over list item in CSS?

This is quite simple with css try this fiddle link :https://jsfiddle.net/xfz6x9wt/

ul{
height:30px;
}
ul li a {

color:green}

ul li a:hover {
color:red;
}

 ul li a:hover + div.hide{
color:red;
visibility:hidden;
}

<ul><li><a href="#">hii</a>
<div class="hide"> hide</div></li>
</ul>

CSS - Rollover one element, and make another element visible

Here's a CSS only tooltip I use all the time :) Works great, even in IE.

a:hover {
background:#ffffff; 
text-decoration:none;
} 
/*BG color is a must for IE6*/

a.tooltip span {
display:none; 
padding:2px 3px; 
margin-left:8px; 
width:130px;
}

a.tooltip:hover span{
display:inline; 
position:absolute; 
background:#ffffff; 
border:1px solid #cccccc; 
color:#6c6c6c;
}

Easy 

<a class="tooltip" href="#">
Tooltip
<span>T his is the crazy little Easy Tooltip Text.
</span>
</a>

Hope it helps.

Making an Element Visible by Hovering Another Element (Without :Hover-Property)