CSS: image parts change on hover
4 posters
Page 1 of 1
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 .
Re: CSS: image parts change on hover
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;
}
Re: CSS: image parts change on hover
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.
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.
Re: CSS: image parts change on hover
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*/
}
Re: CSS: image parts change on hover
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
Re: CSS: image parts change on hover
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?
Re: CSS: image parts change on hover
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?
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?
Re: CSS: image parts change on hover
Hello there,
Try using this CSS instead:
Try using this CSS instead:
- Code:
.menu:hover .one {
background-color:red;
}
.menu:hover .two {
background-color:green;
}
Re: CSS: image parts change on hover
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/
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/
Re: CSS: image parts change on hover
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.
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.
Re: CSS: image parts change on hover
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.
Re: CSS: image parts change on hover
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):
This way, two separate divs change color of the same div.
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.
Re: CSS: image parts change on hover
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', '');
});
});
Re: CSS: image parts change on hover
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?
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?
Re: CSS: image parts change on hover
To add more CSS rules you can use this method:
- Code:
$("p").css({"background-color": "yellow", "font-size": "200%"});
Re: CSS: image parts change on hover
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?
Will let you know how it goes.
@Luffy
Hmm, I have tried it here: https://jsfiddle.net/
but no go -..- am I missing something?
Re: CSS: image parts change on hover
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?
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?
Last edited by Kami-sama on November 20th 2016, 6:53 pm; edited 1 time in total
Re: CSS: image parts change on hover
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"});
Re: CSS: image parts change on hover
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
|
|
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.
- Declare it in your CSS stylesheet or
- 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');
Similar topics
» Change signature linked image opacity on hover?
» Show Image On Mouse Hover Over Image Link
» Banner change on hover...Background change
» Hover over image
» hover over image
» Show Image On Mouse Hover Over Image Link
» Banner change on hover...Background change
» Hover over image
» hover over image
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum