Css: Hover One Element, Effect For Multiple Elements

CSS: Hover one element, effect for multiple elements?

You don't need JavaScript for this.

Some CSS would do it. Here is an example:

<html>  <style type="text/css">    .section { background:#ccc; }    .layer { background:#ddd; }    .section:hover img { border:2px solid #333; }    .section:hover .layer { border:2px solid #F90; }  </style></head><body>  <div class="section">    <img src="myImage.jpg" />    <div class="layer">Lorem Ipsum</div>  </div></body></html>

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>

Selecting :hover for multiple elements

You need to repeat button in each selector:

.entry01:hover button, .entry02:hover button, .entry03:hover button, ... {
    display: block;
}

Each comma-separated item is treated as a complete selector. If you use a preprocessor like LESS or SASS you may be able to simplify it.

A better solution would probably be to give all of them the same class, e.g.

<div class="entry entry01">...</div>

Then you can just use:

.entry:hover button {
    display: block;
}

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

Can you set multiple elements hover declaration to only one div?

If the id of the parent elements starts with el you can use the [attr^="value"] starts-with attribute selector.

[id^="el"]:hover .test{
  // some code
}

Otherwise you will have to use the , to separate the selectors

#el1:hover .test,
#el2:hover .test,
#el3:hover .test{
 // some code
}

Finally you could add a common class to the parent elements so that you can target it directly

<div id="el1" class="common-class">
  <span class="test">..</span>
</div>

<div id="el5" class="common-class">
  <span class="test">..</span>
</div>

and use

.common-class:hover .test{
  // some code
}

CSS: Hover over one element, effect another?

here is a simplified example. hope it helps you get started.

basically we are setting callback functions when the mouse is hovered and left on the div foo. And in those functions we are changing the css properties of the img, in this case, adding a border and removing it.

http://jsfiddle.net/btevfik/YC2tg/

JQUERY

$(document).ready(function () {
    $(".foo").hover(function () {
        $(".bar").css("border", "5px red solid");
    });
    $(".foo").mouseleave(function () {
        $(".bar").css("border", "none");
    });
});

HTML

<div class="foo">HOVER HERE</div>
<img class="bar" src="http://placekitten.com/100/100" />

How to apply css hover on multiple elements

You can try

.f:hover > .work-cart, .g:hover > .work-cart, .h:hover > .work-cart{
   left: 220px;
   opacity: 1;
}

Css: Hover One Element, Effect For Multiple Elements