CODEWITHSUNDEEP
javascripthtmlcss
ola
ola

Reputation: 25

How I can apply dynamic width only on div not on div: hover by CSS and JavaScript

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

In above code the width of div: hover not changes with mouseover. div width should change according to "$dynamic_width" veriable and on mouse over it should be 200px

Upvotes: 0

Views: 124

Answers (2)

user1248752
user1248752

Reputation:

Your file probably is not a PHP file but a HTML file. Change the extension of your file to .php . If the file is not .php any php code is considered as plain html

Upvotes: 0

Yoshi
Yoshi

Reputation: 54649

As the element style takes precedence over a more general style, the 200px from the :hover pseudo class are never applied.

Try:

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

demo: http://jsfiddle.net/bn2Sc/1/

Upvotes: 2

Related Questions