How can I replace the image inside the div class of "icon" by the image inside the div class of "upgrade-big" upon hovering over the "upgrade-icon" class? If you find this confusing, then please reply too!
How can I replace the image inside the div class of "icon" by the image inside the div class of "upgrade-big" upon hovering over the "upgrade-icon" class? If you find this confusing, then please reply too!
That would be very useful, but do you think it's possible to just do what I added above, because it woulud use too much space if I were to apply this to everything though.
You'll need to explain what you're trying to do better. I don't understand what you're trying to do that the above wouldn't solve. Unless you're trying to make some sort of hover template like {{HoverImage|File:Xyz.png|File:Xyz Hover.png}}
Let me see if this is more clearer:
When your mouse hovers over "upgrade-icon", replace "icon" by "upgrade-big". Please bare in mind those are all images.
So you're trying to change CSS classes on hover? From the vague description you've given, I would just rename .upgrade-big
to .upgrade-icon:hover
.
If you really want to insist on using JavaScript, which I wouldn't recommend unless you really really need to, then this is a simple enough problem:
$(document).on({ mouseenter: function() { $(this).removeClass('upgrade-icon').addClass('upgrade-big'); }, mouseleave: function() { $(this).removeClass('upgrade-big').addClass('upgrade-icon'); } }, '#mw-content-text .upgrade-icon, #mw-content-text .upgrade-big');
Thanks!
Well, it's having a problem, as shown here. It's not doing the style I am trying to achieve.
There's no styles attached to those classes. There's also a glitch I didn't know about but that doesn't matter.
It looks like what you're trying to do is switch images from image A to image B when hovered. Use this CSS:
.image-container { display: inline-block; position: relative } .image-container > .image { -webkit-transition-property: opacity, visibility; -webkit-transition-duration: 0.5s; transition-property: opacity, visibility; transition-duration: 0.5s; top: 0; left: 0; position: static; opacity: 1; visibility: visible } .image-container > .image:last-child { position: absolute; opacity: 0; visibility: hidden } .image-container:hover > .image:first-child { position: absolute; opacity: 0; visibility: hidden } .image-container:hover > .image:last-child { position: static; opacity: 1; visibility: visible }
Use that like this:
<div class="image-container"> <div class="image">[[File:Whatever.png]]</div> <div class="image">[[File:XYZ.png]]</div> </div>
What is "image-container", and what is "image"?
Exactly what it looks like in the code example... I showed you how to use it. 2 DIVs with class "image" inside a parent DIV with class "image-container".
The first image DIV would be "upgrade-icon", the second one would be "upgrade-big".
Thanks! I will try it out.