css悬停未执行答案

【问题标题】：css hover not executingcss悬停未执行
【发布时间】：2013-09-02 07:21:28
【问题描述】：

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

范围

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

【问题讨论】：

不要使用内联样式。您的问题是内联样式比 CSS 更优先。把它们放在你的stylesheet.css 中就可以了。
你为什么使用内联样式和 CSS 太乱了。
所有不在引号中的都应该是小写。你是用 microsoft word 还是什么东西创建的？

标签： css image hover

【解决方案1】：

我相信内联样式优先于 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"/>

【讨论】：

【解决方案2】：

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

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

【讨论】：

非常不建议经常使用 !important，尤其是当他可以通过停止使用内联样式在一分钟内修复它时。
我同意你的看法，我只是给了他所有可用的选项。我想我应该把它包括在我的答案中:)
谢谢你们。我让它工作了。这东西很新。没有更多的内联样式。
@user2719596 这不是推荐的解决方案。它可能有效，但建议不要这样做。

【解决方案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;
}

【讨论】：

这可行，但非常不建议经常使用!important，尤其是当他可以通过停止使用内联样式在一分钟内修复它时。