The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

CSS: image parts change on hover

View previous topic View next topic Go down

In progress CSS: image parts change on hover

Post by Kami-sama on November 19th 2016, 11:41 pm

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 Wink

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 .

Kami-sama
Forumember

Female Posts : 167
Reputation : 4
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

In progress Re: CSS: image parts change on hover

Post by Draxion on November 19th 2016, 11:59 pm

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

Draxion
Helper
Helper

Male Posts : 720
Reputation : 110
Language : English
Location : USA

http://dawnofthedragons.forumotion.com/

Back to top Go down

In progress Re: CSS: image parts change on hover

Post by Kami-sama on November 20th 2016, 12:04 am

Hey Draxion!

Thank you for your response Wink 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.

Kami-sama
Forumember

Female Posts : 167
Reputation : 4
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

In progress Re: CSS: image parts change on hover

Post by Draxion on November 20th 2016, 12:06 am

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

Draxion
Helper
Helper

Male Posts : 720
Reputation : 110
Language : English
Location : USA

http://dawnofthedragons.forumotion.com/

Back to top Go down

In progress Re: CSS: image parts change on hover

Post by Kami-sama on November 20th 2016, 12:12 am

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

Kami-sama
Forumember

Female Posts : 167
Reputation : 4
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

In progress Re: CSS: image parts change on hover

Post by Draxion on November 20th 2016, 12:15 am

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?

Draxion
Helper
Helper

Male Posts : 720
Reputation : 110
Language : English
Location : USA

http://dawnofthedragons.forumotion.com/

Back to top Go down

In progress Re: CSS: image parts change on hover

Post by Kami-sama on November 20th 2016, 12:18 am

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.

Smile anyone has better suggestions?

Kami-sama
Forumember

Female Posts : 167
Reputation : 4
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

In progress Re: CSS: image parts change on hover

Post by Luffy on November 20th 2016, 12:32 am

Hello there,

Try using this CSS instead:
Code:
.menu:hover .one {
  background-color:red;
}
.menu:hover .two {
  background-color:green;
}






Luffy
Manager
Manager

Male Posts : 4337
Reputation : 431
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

In progress Re: CSS: image parts change on hover

Post by Kami-sama on November 20th 2016, 12:40 am

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/

Kami-sama
Forumember

Female Posts : 167
Reputation : 4
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

In progress Re: CSS: image parts change on hover

Post by Luffy on November 20th 2016, 12:47 am

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.






Luffy
Manager
Manager

Male Posts : 4337
Reputation : 431
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

In progress Re: CSS: image parts change on hover

Post by Draxion on November 20th 2016, 12:48 am

@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.

Draxion
Helper
Helper

Male Posts : 720
Reputation : 110
Language : English
Location : USA

http://dawnofthedragons.forumotion.com/

Back to top Go down

In progress Re: CSS: image parts change on hover

Post by Kami-sama on November 20th 2016, 12:51 am

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.

Kami-sama
Forumember

Female Posts : 167
Reputation : 4
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

In progress Re: CSS: image parts change on hover

Post by Luffy on November 20th 2016, 12:59 am

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', '');
  });
});






Luffy
Manager
Manager

Male Posts : 4337
Reputation : 431
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

In progress Re: CSS: image parts change on hover

Post by Kami-sama on November 20th 2016, 1:03 am

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?

Kami-sama
Forumember

Female Posts : 167
Reputation : 4
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

In progress Re: CSS: image parts change on hover

Post by Luffy on November 20th 2016, 1:06 am

To add more CSS rules you can use this method:
Code:
$("p").css({"background-color": "yellow", "font-size": "200%"});






Luffy
Manager
Manager

Male Posts : 4337
Reputation : 431
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

In progress Re: CSS: image parts change on hover

Post by Kami-sama on November 20th 2016, 1:07 am

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?

Kami-sama
Forumember

Female Posts : 167
Reputation : 4
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

In progress Re: CSS: image parts change on hover

Post by Kami-sama on November 20th 2016, 1:48 am

Okey, so on the forum all is go! Amazin Smile
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?


Last edited by Kami-sama on November 20th 2016, 6:53 pm; edited 1 time in total

Kami-sama
Forumember

Female Posts : 167
Reputation : 4
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

In progress Re: CSS: image parts change on hover

Post by Kami-sama on November 20th 2016, 6:52 pm

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 Smile 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
Forumember

Female Posts : 167
Reputation : 4
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

In progress Re: CSS: image parts change on hover

Post by Ace 1 on November 21st 2016, 8:58 pm

@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 Smile 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');

Ace 1
Helper
Helper

Male Posts : 769
Reputation : 50
Language : English - French?
Location : Druid Hill Park

http://help.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum