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!
As always, please give a link to the page where you want to do this.
I am going to apply this to a lot of pages, and I didn't even have a starting code yet, so how am I supposed to answer this question?
<span class="hover-icon"></span>
.hover-icon { background: url("images1.wikia.nocookie.net..."); width: 40px; height: 40px; display: inline-block; } .hover-icon:hover { background: url("hover version of the icon"); }
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');