0

我希望图像在悬停在其上时略微增大。我知道这很简单，但是我已经在其他示例中寻找了一个小时，似乎无法弄清楚我缺少什么。我很感激帮助。这些图像被保存到我的电脑中。

范围

<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;
}
4

3 回答 3

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"/>
于 2013-08-29T18:10:24.047 回答
2

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

无论如何，!important规则不建议经常使用。所以你最好删除你的内联样式并将它们放在.css文件中（或者至少是<style>里面的元素<head>）

于 2013-08-29T18:08:59.407 回答
1

试试这种风格

#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;
}
于 2013-08-29T18:09:39.023 回答