Pure CSS Hover Show Another Element Possible

pure css hover show another element possible?

a div {
    display: none;
}

a:hover div {
    display: block;
}

Can pure CSS change other element on hover if its not child element?

Write it as -

#form{
    opacity:0;
    filter:alpha(opacity=0); /*For IE8*/
}

#log:hover ~ #form {
    opacity: 1;
    filter:alpha(opacity=100); /*For IE8*/
}

Working Demo

Pure CSS, div hover can affect more than one element

It all depends on what relationship is between those elements.

1. If they are siblings and one after the other use + also for the c div . See below

div {

  height: 50px;

  width: 50px;

  border: 1px solid black

}

.a:hover + .b {

  background: blue;

}

.a:hover + .b + .c {

  background: red;

}

<div class="a">

  a

</div>

<div class="b">

  b

</div>

<div class="c">

  c

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

Is there any way to hover over one element and affect a different element?

The only way to do this with CSS is if the element to affect is either a descendent or an adjacent sibling.

In the case of a descendent:

#parent_element:hover #child_element, /* or */
#parent_element:hover > #child_element {
    opacity: 0.3;
}

Which will apply to elements such as:

<div id="parent_element">
    <div id="child_element">Content</div>
</div>

For adjacent siblings:

#first_sibling:hover + #second_sibling {
    opacity: 0.3;
}

Which works for mark-up such as:

<div id="first_sibling">Some content in the first sibling</div> <div id="second_sibling">and now in the second</div>

In both cases the latter element in the selector is the one chosen.

Given your pseudo-code example, you probably want something like:

img:hover + img {
    opacity: 0.3;
    color: red;
}

JS Fiddle demo.

Hover on multiple elements (pure css)

If you use display: flex you can accomplish something like that, where you markup wise have them in backward order, so you can use a sibling selector, though visually, using Flexbox's order property, you swap them back into the right order

.test {

  display: inline-flex;

  background: #eee

}

.test > span {

  display: inline-block;

  position: relative;

  color: green;

  border: 1px solid green;

  padding: 5px;

}

.test > span:nth-child(1) { order: 3; }

.test > span:nth-child(2) { order: 2; }

.test > span:nth-child(3) { order: 1; }

.test > span:hover,

.test > span:hover ~ span {

  background: green;

  color: white;

}

<div class="test">

  <span>icon 2</span>

  <span>icon 1</span>

  <span>Lorem ipsum</span>

</div>

Affecting div:hover with another div

Sure, just use the adjacent sibling selector:

#div1:hover + #div2 {
    ...
}

An example here: http://jsfiddle.net/6BfR6/94/

Show div when hover another div using only css

This will work, but only if the two divs are adjacent and b follows a.

#a:hover + #b {
    background: #f00
}

<div id="a">Div A</div>
<div id="b">Div B</div>

If you have divs in between use ~

#a:hover ~ #b {
    background: #f00
}

<div id="a">Div A</div>
<div id="c">Div C</div>
<div id="b">Div B</div>

To go the other way around, unfortunately you will need Javascript

// Pure Javascript
document.getElementById('b').onmouseover = function(){
    document.getElementById('a').style.backgroundColor = '#f00';
}
document.getElementById('b').onmouseout = function(){
    document.getElementById('a').style.backgroundColor = '';
}

// jQuery
$('#b').hover(
  function(){$('#a').css('background', '#F00')}, 
  function(){$('#a').css('background', '')}
);

Full fiddle http://jsfiddle.net/p7hLL/5/

On a CSS hover event, can I change another div's styling?

Yes, you can do that, but only if #b is after #a in the HTML.

If #b comes immediately after #a: http://jsfiddle.net/u7tYE/

#a:hover + #b {
    background: #ccc
}

<div id="a">Div A</div>
<div id="b">Div B</div>

That's using the adjacent sibling combinator (+).

If there are other elements between #a and #b, you can use this: http://jsfiddle.net/u7tYE/1/

#a:hover ~ #b {
    background: #ccc
}

<div id="a">Div A</div>
<div>random other elements</div>
<div>random other elements</div>
<div>random other elements</div>
<div id="b">Div B</div>

That's using the general sibling combinator (~).

Both + and ~ work in all modern browsers and IE7+

If #b is a descendant of #a, you can simply use #a:hover #b.

ALTERNATIVE: You can use pure CSS to do this by positioning the second element before the first. The first div is first in markup, but positioned to the right or below the second. It will work as if it were a previous sibling.

---

Related Topics