Question

当我将鼠标悬停在网页上时，我很难尝试将徽标置于网页顶部。

更具体地说，我的页面顶部有一个徽标，当用户将鼠标悬停在其上时，我创建了另一个略有不同的徽标。

这是我的代码：

#top{
width:1366px;
height:100px;
background-color:#1e125b;
}

body{
    background-color:white;
    background-repeat:repeat;
    margin: 0;
}

#top:hover{
background-image: url('Logo_hover.png');
}

Logo_hover在整个div中倍增，而不是简单地改变初始图像。我知道背景图像不是我应该用于此问题但我似乎无法找到任何其他解决方案。

Answer 1

#top返回：悬停{ background-image：url（'Logo_hover.png'）; background-repeat：无 }

Answer 2

你有没有用过.onmouseover＆amp; this.onmouseout？

<img src='your pic' onmouseover="this.src='your pic on mouse over';" onmouseout="this.src='your pic on mouse out';" />

Answer 3

＆＃13;

.logo {
    background-image: url("http://placehold.it/120x120&text=image1");
    background-repeat: no-repeat;
    height: 120px;
    width: 120px;
}

.logo:hover{
  
    background-image: url("http://placehold.it/120x120&text=image2");
    background-repeat: no-repeat;
    height: 120px;
    width: 120px;
}

＆＃13;

<div class="logo"></div>

＆＃13;

Answer 4

#top{

        background-image: url(logo.png); 
        background-repeat: no-repeat;
        background-size: cover;
        overflow:hidden;
        width: 120px;
        height: 120px;


}
#top:hover{

        background-image: url(logo_hover.png);
}

我想在css中徘徊时改变我的徽标

4 个答案: