Change Only One of Multiple Backgrounds on Hover

Change only one of multiple backgrounds on hover

This is now possible with CSS variables:

#element {
    --gradient: linear-gradient(to top, #86a53c, #516520);

    background: url(image.png) no-repeat center center,
                var(--gradient);
}

#element:hover {
    --gradient: linear-gradient(to top, #A0C153, #516520);
}

See it here in action: https://jsfiddle.net/22zu6oaq/

CSS hover grid box with 2 different background colors at once

As I understand it you want the user to be able to hover anywhere on the grid and change the background for the div, which you already do using .grid1:hover .companyname

But you don't want it to alter the background of the image div as well.

This snippet removes the .grid1:hover img

.grid1 {
  background: #fdfdfd;
  height: 300px;
  cursor: pointer;
  border: 1px white solid;
  transition: border 0.5s;
}

.grid1:hover {
  border: 1px solid black;
  background-color: #f9fafc;
}

.grid1 img {
  width: 98%;
  height: 275px;
  object-fit: contain;
  filter: brightness(99.3%);
  margin-left: 1%;
  filter: blur(1px) grayscale(1) opacity(75%);
}

/*.grid1:hover img,*/
.grid1:hover .companyname {
  filter: none;
  filter: brightness(99.3%);
  color: black;
  background: steelblue;
}

<div class="grid1">
  <img src="https://via.placeholder.com/1920x1080.jpg">
  <div class="companyname">
    <p>us</p>
  </div>
</div>

How to change background on hover for 2 elements using css

You target the parent's hover state and add any child elements you want their attributes modified.

.nav-btn:hover .nav-btn-lt,
.nav-btn:hover .nav-btn-rt {
    background: blue;
}

JSFiddle: http://jsfiddle.net/0zqm0bd7/1/

How do I disable one of the multiple backgrounds in CSS?

background:none is a keyword and will override all other statements.

Unfortunately, there is no solution without repeating the declarations. you can't overide part of a multiple declaration.

Use transparent instead.

.selector {
  background: A, B, C, D;
}

.selector:hover,
.selector:focus {
  background: transparent, B, C, D;
}

or just remove the first background all together.

.selector:hover,
.selector:focus {
  background: B, C, D;
}

Advanced CSS Custom Properties (also known as CSS variables) can help here though if you define your backgrounds as "variables" you only need to change the definiton of that variable on `:hover.

:root {  --background-a: url(http://www.placebacon.net/100/100);}
div {  width: 100px;  height: 100px;  background: var(--background-a);}
div:hover {  width: 100px;  height: 100px;  --background-a: red;}

<div></div>

How to change multiple background-images' position on the same element with jQuery/Javascript

Try setting second parameter to background-position property to 0 13px at single call to .css() , with parameters separated by comma , ; removing second call to .css("background-position") . See Using CSS multiple backgrounds

.css("background-position","bottom center, 0 13px");

jsfiddle https://jsfiddle.net/rgwnye91/1/

Change background-color in two different divs on one hover

You can use the adjacent sibling selector:

.button1:hover + .button2 { background:green; }

JSFiddle

Or, if the buttons don't immediately follow one another (but still follow, as a sibling), you can use the general sibling selector:

.button1:hover ~ .button2 { background:green; }

JSFiddle

---

If you require both buttons to be hovered, you would need to have a container over which you could hover and in turn, change descendants' styles:

.container:hover > div { background:green; }

JSFiddle

Change multiple elements hover background color using JavaScript?

With a common class.

<a href="#" id="spacetile1" class="space">Link 1</a>
<a href="#" id="spacetile2" class="space">Link 2</a>
<a href="#" id="spacetile3" class="space">Link 3</a>
<a href="#" id="spacetile4" class="space">Link 4</a>

Using JQuery - JQuery Mouse Events

$(".space").mouseover(function(){

      if($(this).css('background-color')=='#FFF000')
      {
          $(this).css('background-color','#000FFF');
      }
      //else if else if and so on...
});

$(".space").mouseout(function(){

      if($(this).css('background-color')=='#FFF000')
      {
          $(this).css('background-color','#000FFF');
      }
      //else if else if and so on...
});

---

Related Topics