Question: Show different images on hover

HTML-CSS
1

Hi,
I have three icons, and I’d like a different image to be shown in the same spot depending on which icon you’re hovering over. I am using bootstrap. Does anyone know how this is done? Any help is appreciated!

Than you in advance!

2

Interesting question, I do not have an answer, but to get the train of thought going I’m thinking along these lines.
Since hover effects are an aspect of CSS setting the icon in HTML will probably not work. However if you create an empty division and use the pseudo element of ::before and the content=“icon 1” then in CSS you could go with setting a different icon as the content on hover as “icon 2”.
Really interested to see what others say.

Would anybody posting to this tag me into the conversation I would greatly appreciate it.

1 Like
3

Hi @hello1

So, CSS is traditionally used to animate the objects you’re directly interacting with. You could change the background image of the icon you’re hovering over for sure. but changing the background image of a different object somewhere else on the page is a lot trickier. Especially if you’re trying to do it in a production/business environment, because then you’ve got to get it to work on different browsers and phones. I’d personally try to avoid those less chartered waters, unless its strictly for studying the limits of CSS.

I believe @ChrisCline1138 is right, you could position each icon’s ::before image in the exact same spot, and hide and show the ::before pseudo element on hover. But I think if you’re new to this, it might be a better use of your time to use the tools that lend themselves to your goals. While many things are possible with CSS alone, not all things are practical.

Here’s what I think it’d look like to get started in plain javascript, I haven’t tested this code so I wouldn’t be shocked if theres a syntax error in it, sorry in advance if there is.

// this event listener triggers the function "mouseOverFunction"
document.getElementById("demo").addEventListener("mouseover", mouseOverFunction);

mouseOverFunction(){
// this function changes the background of an element.
  document.querySelector('#div-that-will-have-bg-change').style.backgroundImage="url('https://apicture.com/some-picture.png')";
}

you’d need a similar event listener/trigger and function for ‘mouseout’ as well, to unset the image again.

2 Likes
4

If you want to change an image on hover you use background property of css.

<div id="myImg">
</div>

#myImg {
    background: url("img_animal.png") no-repeat;
    height: 200px;
    width: 200px;
}

#myImg:hover {
    background: url("img_tree.png") no-repeat;
}
5

and you would add this within a <script> _insert code here_ </script> tag in your html, correct?

6

got this to work!


html

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div class="test">Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, iste quam. Dolor, quo? Aliquam, harum architecto culpa .</div>

CSS

.test {
	padding-left: 10px;
}

.test::before {
	font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f007";
padding-right: 30px;	
}

.test:hover::before{
	color: red;	
        content: "\f008";	
}

image
image722×52 2.45 KB

7

You’re correct. Javascript can live between script tags, or in a .js file.

The generally encouraged approach is to put all of your js into a file, and refer to that file in your head inside a script tag. You’ll get a walk through on that when get into the JS part of FCC so don’t sweat.