CSS: image parts change on hover

Technical Details

Forum version : #phpBB2
Position : Founder
Concerned browser(s) : Google Chrome
Who the problem concerns : Yourself
Forum link : ( link is hidden, you must reply to see )

Description of problem

Hello everyone!

I was messing around with some CSS to get something interesting going, but I cannot seam to find how this could work:

I have a PNG image (220x220 px). I want to hover over sections of it. On hover, the image should change. Example: the image is in black and white. On hover, the hovered area changes to colored version.

I have tried multiple ways, but I just cannot affect the outside div with hover. Is that even possible?

Let me know if you have any ideas or suggestions

P.S. The image would be used in "Announcement" section.
P.P.S. Making it very simple, this is what I want to do:

Code:

.one:hover + .menu {
  background-color:red;
}
.two:hover + .menu {
  background-color:green;
}

Code:

<div class="menu">
  <div class="one">One</div>
  <div class="two">Two</div>
</div>

Anyway, I could work with arrangement and have the .menu div bellow the .one and .two div's, but I cannot get them both to affect .menu .

Hi there, you don't need the '.menu' on the code for the hovers to work. You just need this.

Code:

.one:hover {
  background-color:red;
}
.two:hover {
  background-color:green;
}

Hey Draxion!

Thank you for your response but, your suggestion would only chane the BG of .one element not the BG for both .one and .two what is .menu in other words by hovering .one and .two the .menu element has to change.

If you want both elements to change color on hover, then you would use the '.menu' selector.

Code:

.menu:hover {
  background-color: red; /*or green*/
}

Haha. No, that will not work when you hover over .one the .menu background has to chane to red. When you hover over .two the BG changes to green

So let me see if this is what you want just so I am clear. You want the entire 'menu' element to change background depending on what 'one' or 'two' element you hover over, correct?

Exactly! I know it is possible by having the divseption (div in a div in a div), but I cannot find the correct sequence -..-

EDIT: I tink I might have it figured out. a complicated way:

.menu has one image
.one and .two have their images and opacity is 0
on hover opacity is 1

possible, but very ify ... and a lot o workarounds needed.

anyone has better suggestions?

Hello there,

Try using this CSS instead:

Code:

.menu:hover .one {
  background-color:red;
}
.menu:hover .two {
  background-color:green;
}

Hello Luffy!

Thank you for your response! Unfortunately, that does not work too. It activates both colors at the same time as you are hovering over menu. You can see very well here: https://jsfiddle.net/

I'm sorry but that's what i understood. Once hovering either one they both change.
What is the problem to that? The length of them? Because if that's the case a CSS code can help make that exactly how you want it to be.

Can you please explain with detail what you want to do? Maybe provide some images or some examples with colors.

Draxion wrote:So let me see if this is what you want just so I am clear. You want the entire 'menu' element to change background depending on what 'one' or 'two' element you hover over, correct?

@Luffy

I know what she is requesting but I believe that can only be done via JavaScript.

Luffy, it is very simple: hover over ONE - red BG, hover over TWO - green BG.
Draxion, I was thinking about java too. But I am not very good with it here.

I think this could work (playin with relative and absolute positions maybe):

Code:

.one:hover .three {
  background-color:red;
}
.two:hover .three {
  background-color:green;
}

<div class="menu">
  <div class="one">One
    <div class="two">Two
      <div class="three">Tree</div>
    </div>
  </div>
</div>

This way, two separate divs change color of the same div.

Yeah i mean the easiest way to do it is by using this javascript:

Code:

$(function() {
  $('.one').hover(function() {
    $('.menu').css('background-color', 'red');
  }, function() {
    // on mouseout, reset the background colour
    $('.menu').css('background-color', '');
  });
  $('.two').hover(function() {
    $('.menu').css('background-color', 'green');
  }, function() {
    // on mouseout, reset the background colour
    $('.menu').css('background-color', '');
  });
});

How would you specify the background-image? And transition should be added here too?

Also, you must put this in the forums script place? As I remember you cannot just add it with CSS as you can do with STYLE?

To add more CSS rules you can use this method:

Code:

$("p").css({"background-color": "yellow", "font-size": "200%"});

oh! perfection! I will try it out now.
Will let you know how it goes.

@Luffy
Hmm, I have tried it here: https://jsfiddle.net/
but no go -..- am I missing something?

Okey, so on the forum all is go! Amazin
Thank you Luffy.

One more questions:
when you have a PNG image, is there a way for the code to react only to an image not the transparent parts?

EDIT: also, how to have two different thins happen on one hover. With our example: on .one hover .menu changes BG and .two changes size? is that a second hover function for .one?

Okey, so I think I got the hang of it. Now I only ave an issue with a button element. On hover, the BG changes appropriately, but the button function ".one:focus + div" no longer works. It reacts to hover not click. Any ideas?

figured it out some opacity issues.

So the only thing left - transition of te over. I added something like this, but it still does not react:

Code:


$('.menu').css({"background-image": "", "transition": "all 1s", "transition" : "opacity 0.5s linear"});


Kami-sama wrote:Okey, so I think I got the hang of it. Now I only ave an issue with a button element. On hover, the BG changes appropriately, but the button function ".one:focus + div" no longer works. It reacts to hover not click. Any ideas?

figured it out some opacity issues.

So the only thing left - transition of te over. I added something like this, but it still does not react:

Code:


$('.menu').css({"background-image": "", "transition": "all 1s", "transition" : "opacity 0.5s linear"});


Two things.

1: When using

Code: transition

, you have to declare all transitional properties at one time. Otherwise, one of those css declarations will override the other. Also, when combining multiple properties, you can't use the keyword

Code: all

. It will automatically override all other transition modifications you've made.

2: This jQuery is executed on a mouse event. Any time you want to change the transition of an HTML element, it has to be done before the pseudo-event is triggered. So if you want to change it, can do one of two things.

1. Declare it in your CSS stylesheet or
   
2. Use jQuery to inject a style into your HTML document

For a, you can use this CSS:

Code:

.menu { transition: background-color 1s, opacity 0.5s linear; }

For b, add this jQuery to your JS (outside of the hover function):

Code:

$('.menu').css('transition', 'background-color 1s, opacity 0.5s linear');