Can anyone help me out ? I'm trying to make my logo to change into another image when on hover.
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles/base.css"/>
<link rel="stylesheet" href="styles/modele01.css"/>
<link rel="shortcut icon" href="./images/favicon.ico" >
<title> Look At Them Cars </title>
<style type='text/css'>
img {
background-image: url('./images/LogoSite.png');
}
img:hover {
background-image: url('./images/LogoBleu.png');
}
</style>
</head>
<body>
<div id="titre" class="slide header">
<h1><a href="index.html"><img src="./images/LogoSite.png"></a></h1>
<br></br>
<div id="liste">
<a href="Lexus">Lexus</a>
<a href="Porsche">Porsche</a>
<a href="Toyota">Toyota</a>
<a href="Crédits">Crédits</a>
</div>
</div>
I've been trying to do a class in my css img:hover with the background-image that I want to change to it. It didn't work
Using the background image property approach, try this at the top of your html page in the head tag:
<style type='text/css'>
img {
background-image: url('firstimage.png');
}
img:hover {
background-image: url('second.png');
}
</style>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.