Hover One Element, and Change Another (Without Using JavaScript)

Hover one element, and change another (without using Javascript)

You must change your CSS selector to target the lvl2 <ul>, since it is not nested anymore (it's a sibling, so use +).

a.lvl1:hover + ul.lvl2 {display: block} /* The magic */

You should read this
list of css selectors.

Or you could move the hover on the lvl1 <li>, instead of the anchor

li.lvl1:hover ul.lvl2 {display: block} /* The magic */

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

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.

Change another div on hover which is not sibling nor child

There is no way without using javascript to affect a different non-sibling selector. But you an do it if you move the hover up one level.

You need to put the hover on the first navbar and using the direct sibling combinator (+) - target the other navbar and then inside it to get the .notpro element. Note that I added words to your elements to show the hover effect.

The only other CSS way of doing this is to put both elements inside the one navbar - then they are siblings and can be targetted.

.navbar:hover + .navbar .notpro { color: red;}

<div class="navbar">    <div class="btn-section btn-1">        <p class="section pro">I am a Pro</p>    </div></div>
<div class="navbar">    <div class="btn-section btn-2">        <p class="section notpro">I am Not a Pro</p>    </div></div>

Change one element on hover another

You can use hover function & add css to show and hide it

$("#menu-item-993").hover(function(){
  $(".post-filter").css('display','block')
},function(){
  $(".post-filter").css('display','none')
})

JSFIDDLE

Hover on one element changes on another with css only

try this

<form id="numerical" class="row">
  <label for="btn" class="label"></label>
  <div class="form-group row">
    <label>Enter Number :</label>
    <input type="text" id="tel">
  </div>
  <div class="form-group row">
    <label>Result :</label>
    <input type="text" id="result">
  </div>
  <button type="submit" id="btn" class="row">Submit</button>
</form>

<style>#numerical{
  position: relative;
}
.form-group {
    margin-bottom:10px;
}
#numerical .label {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 32px;
  width:102px;
}
.label:hover ~ .form-group input {
  border: solid 2px red;
}
#btn{
    background:blue;
    color:#fff;
    height:30px;
    width:100px;
}   </style>

Fiddle

How to change one element while hovering over another

You can achieve this in CSS only if the hidden div is a child of the element you use for hovering:

http://jsfiddle.net/LgKkU/

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>

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 an element to change another?

Unfortunately you are only able to select siblings and children with CSS. To be able to target .test you would need to apply :hover on either the ul or container div.

A detailed explanation of child and sibling selectors in CSS can be found here.

Update

Whilst I'm not a fan of the semantics, here is an POC example of how it could work using CSS and changing the structure of the markup.

<div class="the-container">
<ul>
    <li class="item-html"><a class="html" href="#"></a></li>
    <li><a class="css" href="#"></a></li>
    <li><a class="photoshop" href="#"></a></li>
    <li><a class="illustrator" href="#"></a></li>
    <li><a class="javascript" href="#"></a></li>
    <li><div class="test"><p>Hello</p></div></li>
</ul>
</div>

.item-html:hover ~ li div.test { background: yellow; }

Fiddle

---

Related Topics