CSS on Hover Show Another Element

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

Show element on hover another using css

You wrote the following in your css file :

.attachment-grid-feat:hover ~ .headline-overlay {
    display:block;
}

It won't work since .attachment-grid-feat isn't the parent of .headline-overlay. So it won't select the state when the parent is selected because there are no element .healine-overlay inside .attachment-grid-feat. Also no need to add ~ between the two. The right selector is the following :

.portfolio-reaction:hover .headline-overlay {
    display: block;
}

This way you are targeting the child div .healine-overlay when parent div .portfolio-reaction (you might want to make the <a> tag a <div> tag) is hovered.

.portfolio-reaction {
  width: 250px;
  height: 250px;
  display: block;
}

.headline-overlay {
  background: none;
  display: none;
  position: absolute;
  top: 10%;
  z-index: 999;
  text-align: left;
  padding-left: 0.5em;
  font-weight: bold;
  font-size: 1.3em;
  color: #000;
}

.portfolio-reaction:hover .headline-overlay {
  display: block;
}

<div title="#" class="portfolio-reaction" href="#">
  <img src="http://i.imgur.com/OZb7SI8.png" class="attachment-grid-feat" />
  <div class="headline-overlay">
    <div id="element-1">Hello 1</div>
    <div id="element-2">Hello 2</div>
    <div id="element-3">Hello 3</div>
  </div>
</div>

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.

How to display a <div> on hover on another <div>

You want one of the sibling selectors. General sibling ~ or next sibling +

.ClildDiv1:hover ~ .ChildDiv2 {
    display: block;
}

See fiddle here

Or, the parent hover for any child div would be

.Parent:hover > div {
  display: block;
}

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>

CSS Hover Will Not Work When Selecting Another Element

The H1 is not a child of the span it's a sibling so you need the sibling combinator + https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator

span:hover {
  background-color: red;
  color: white;
}
span:hover + h1 {
  color: blue;
}

<span>HOVER</span>
<h1>test</h1>

display an element when hovering on another element

.box {
  display: none;
 
}

.card:hover .box {
  display: inline-block;
  position: absolute;
  height: 30px;
  width: 40px;
  background-color: blue;
  top: 114px;
  right: 94px;
  border-radius: 0px 0px 99px 99px;
}