如何仅在 div 上而不在 div 上应用动态宽度：通过 CSS 和 JavaScript 悬停答案

【问题标题】：How I can apply dynamic width only on div not on div: hover by CSS and JavaScript如何仅在 div 上而不在 div 上应用动态宽度：通过 CSS 和 JavaScript 悬停
【发布时间】：2012-03-15 22:31:04
【问题描述】：

<html>

    <head>
        <style type="text/css">
            div {
                -moz-box-shadow: 0 10px 10px hsla(0, 0%, 0%, .2);
                -webkit-box-shadow: 0 10px 30px hsla(0, 0%, 0%, .2);
                box-shadow: 0 10px 30px hsla(0, 0%, 0%, .2);
            }
            div:hover {
                width:200px;
                background-color:red;
            }
        </style>
    </head>

    <body>
        <? $dynamic_width=800; ?>
            <div style=" width:<? echo $dynamic_width;?>px;">hover selector style links on mouse-over.
                <div>
    </body>

</html>

在上面的代码中，div:hover 的宽度不会随着鼠标悬停而改变。 div 宽度应该根据 "$dynamic_width" 变化而变化，鼠标悬停在它上面应该是 200px

【问题讨论】：

这与php无关！你想使用纯 javascript 还是某种库（jQuery）？

标签： javascript html css

【解决方案1】：

由于元素样式优先于更一般的样式，因此永远不会应用 :hover 伪类中的 200px。

试试：

div:hover
{
    width: 200px !important;
    background-color:red;
}

演示：http://jsfiddle.net/bn2Sc/1/

【讨论】：

实际上我想从服务器获取“$dynamic_width”的值然后想申请。

【解决方案2】：

您的文件可能不是 PHP 文件，而是 HTML 文件。将文件的扩展名更改为 .php 。如果文件不是 .php，则任何 php 代码都被视为纯 html

【讨论】：

我正在使用 php 扩展