CSS question - DIV content change on hover
- Started
- Last post
- 13 Responses
- dmay4
here's a fiddle in css:
- PonyBoy3
I'm working on seomthing for a bunch of little modules that will eventually be about 500px x 500px boxes on screen (they'll eventually be responsive)...
... I'm using GSAP though (I see section_014 said that's the way to go and I kind of agree with him)... If you'd like I'll forward you the simple HTML for this... it has a few divs styled w/css... the graphics / type all transition using GSAP (just like you used to use in Flash):
- (section_014 said JS... not GSAP... but everything I've setup is all JS... just calling GSAP fucntions to make it happen)PonyBoy
- haha... DVs when I offer to share scripts... dicks <3
:)PonyBoy - That was me, actually, and I'd done it by accident. :\ I saw my mistake, and immediate upvoted!Continuity
- ha! :)PonyBoy
- Yeah, sorry about that. :\Continuity
- thank you so much but I think he has nailed it below.fadein11
- :)PonyBoy
- mekk3
Here you go buddy
- section_0140
Javascript is your answer.
Use a document.querySelector() to grab a reference to each div you want to hide.
On hover hide one and show the other. As far as the title you can do the same thing. except you'll be replacing the "innerHTML" of that element.
I realize this is an abstract reply, but it's the best way to do it.
- no need though when it can all be done in CSS which I know it can. But thanks.fadein11
- The "need" is more a matter of opinion. Personally, I prefer to do dynamic DOM manipulation through javascript. Especially when projects get larger.section_014
- But, whateva floats your boat!section_014
- yep I know what you are saying - just no need to get into that detail as I knew it could be done with CSS alone. But thanks again.fadein11
- Continuity0
It _should_ be as simple as this:
div {
background: url(path/to/image.png) 0 0 no-repeat;
}div:hover {
background: url(path/to/hoverImage.png) 0 0 no-repeat;
}This isn't including any sort of transition animation, and it will be dependent on declaring a ID name for each block.
- Ditto the content of the DIV that contains your text.Continuity
- this is just image-swapping of the background... what about the paragraph / title?PonyBoy
- fadein110
thanks but that doesn't really answer it.
issue is not just an image changing on hover...
I need content to change in the div i.e. Title changes to paragraph on hover.
- dmay0
To change the content, you can switch the display of the title and the paragraph:
<div>
<p class="title">This is the Title</p>
<p class="paragraph">This is the Paragraph</p>
</div>div .title {
display: block;
}
div .paragraph {
display: none;
}
div:hover .title {
display: none;
}
div:hover .paragraph {
display: block;
}
- PonyBoy0
or use what dmay just showed you... but use opacity so you can transition it
- dmay0
if you use opacity to transition, and want to replace the content so it shows in the same place (overlap), both <p> should be positioned to absolute.
The elements with opacity:0 still take space in the layout.
- i_was-3
Read the Coran and you'll find the answer.