How to change the image when hovering over

Question

How to change the image when hovering over

Navigation

#1 by (2 votes)

0

I'm doing a service area of my site (wordpress), and I would like to add only images in it and when the user hover over these images that image change to another one so with the name of the service that was the first one ...

I would like to know what is required to do this ... if you give it to do by HTML, or if it will be by css or javascript ...

Thank you in advance.

For the time being this is the code.

<div class="servicos">
		<div class="container">
			<div class="row">

				<div class="col-md-3 col-lg-3">
					<img class = "img-responsive " src = " <?php bloginfo('template_directory' ); ?> /assets/images/logobeta.png">
				</div>
					<div class="col-md-3 col-lg-3">
					<img class = "img-responsive " src = " <?php bloginfo('template_directory' ); ?> /assets/images/logobeta.png">
				</div>
					<div class="col-md-3 col-lg-3">
					<img class = "img-responsive " src = " <?php bloginfo('template_directory' ); ?> /assets/images/logobeta.png">
				</div>
					<div class="col-md-3 col-lg-3">
					<img class = "img-responsive " src = " <?php bloginfo('template_directory' ); ?> /assets/images/logobeta.png">
				</div>



			</div>
		</div>
	</div>

javascript html

asked by anonymous 16.09.2017 / 09:38

1 answer

score 2 · Answer 1

To change the source of an image to a new source you need to use Javascript:

var x = document.querySelectorAll('.servicos .col-md-3');
var novaImg = 'https://lorempixel.com/400/100/sports/5';

for (var i = 0; i < x.length; i++) {
    novoX = x[i];
    novoX.addEventListener('mouseover', function(event){
        this.querySelector('img').src = novaImg;
    });
}

<div class="servicos">
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <img src="https://lorempixel.com/400/100/sports/1"/></div><divclass="col-md-3">
                <img src="https://lorempixel.com/400/100/sports/2"/></div><divclass="col-md-3">
                <img src="https://lorempixel.com/400/100/sports/3"/></div></div></div></div>

Howeverifyouwanttoshowanotherimageonlywhilethemouseishoveringinanimage,youcandosomethinglikethefollowingexamplewithCSSonly:p>

.col-md-3 {
    position: relative;
}
.col-md-3 .seg {
    visibility: hidden;
    opacity: 0;
    position:absolute;
    top:0;
    left:0;
}
.col-md-3:hover .seg {
    visibility: visible;
    opacity: 1;
}

<div class="col-md-3">
    <img class="pri" src="https://lorempixel.com/400/100/sports/1"/><imgclass="seg" src="https://lorempixel.com/400/100/sports/5"/></div>

Orusingtheimageasbackground:

.col-md-3 {
    width: 400px;
    height:100px;
    background-image: url(https://lorempixel.com/400/100/sports/1);
    background-repeat: no-repeat;
}
.col-md-3:hover {
    background-image: url(https://lorempixel.com/400/100/sports/5);
}

<div class="col-md-3"></div>