【问题标题】:How do I make my image change to another image on hover如何让我的图像在悬停时更改为另一个图像
【发布时间】:2015-11-24 09:35:39
【问题描述】:

谁能帮帮我?我正在尝试让我的徽标在悬停时变为另一张图片。

<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>

我一直在尝试在我的 css img:hover 中使用我想要更改为它的背景图像来做一个类。它没有工作

【问题讨论】:

  • edit您的问题包含您想要包含的任何其他信息。

标签: html image css class hover


【解决方案1】:

使用背景图片属性的方法,在你的 html 页面顶部的 head 标签中试试这个:

<style type='text/css'> 
    img {
       background-image: url('firstimage.png');
    }

    img:hover {
       background-image: url('second.png');
    }
</style>

【讨论】:

    猜你喜欢
    • 2014-07-31
    • 2014-05-24
    • 2012-12-29
    • 1970-01-01
    • 2012-10-10
    • 2017-09-06
    • 1970-01-01
    • 1970-01-01
    • 2016-01-12
    相关资源
    最近更新 更多