Question

<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

Answer 1

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

尝试：

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

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

Answer 2

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

我怎么能只在div而不是div上应用动态宽度：通过CSS和JavaScript悬停

2 个答案: