Question

我希望图片悬停在图片上时会略微增大。我知道这很简单，但我已经找了一个比其他例子更好的时间，似乎无法弄清楚我错过了什么。我很感激帮助。这些图像保存到我的电脑中。

范围

<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<embed src="73797^alarmclock.mp3"; autostart="true"; loop="true"; hidden="true";/>

<body>

     <img src ="alarm clock2.jpg"/>

     <p>  Pulling the sheets into my body, I begin to sink back into the bed... 
          uggh... my alarm clock... time to get up..

         <img style = "position:absolute; top:300px; right: 0px; z-index:1" 
          src="computer.jpg"/>

         <IMG  ID="grow" STYLE= "position:absolute; TOP:1157px; LEFT:599px; 
          WIDTH:47px; z-index:2; HEIGHT:47px" SRC="icon2.gif"/> 

</body>

</html>

这是stylesheet.css

#grow:hover {
width: 100px;
height: 150px;
}

Answer 1

在HTML元素中声明的内联样式具有比其他css规则更高的优先级。因此，请考虑使您的规则 !important 或移出内联样式。

无论如何，不建议定期使用!important规则。因此，您最好删除内嵌样式并将其放在.css文件中（或<style>内至少<head>个元素）

Answer 2

内联样式优先于CSS我相信。

将CSS和HTML更改为以下内容：

#grow {
    position:absolute;
    top:1157px; 
    left:599px; 
    width:47px;
    z-index:2;
    height:47px
}
#grow:hover {
    width: 100px;
    height: 150px;
}

HTML：

<IMG  ID="grow" SRC="icon2.gif"/>

Answer 3

试试这种风格

#grow:hover {
width: 100px !important;
height: 150px !important;
}

因为您已经编写了内联样式。要覆盖它，您需要在样式中添加 !important 。还尝试用小写编写html并避免不需要的空格。

您可以做的最好的事情是避免使用内联样式和写样式，如下所示：

#grow
{
    position:absolute; 
    top:1157px; 
    left:599px; 
    width:47px; 
    z-index:2; 
    height:47px
}

#grow:hover
{
    width: 100px;
    height: 150px;
}

css悬停没有执行

3 个答案: