Geek asks and answers

CSS: hovering to force cross-browser solution offset element needed

I have a rather interesting problem, and I thought if this could be done exclusively in CSS. I know you can use webkit moz or javascript transforms, but is there another simple solution for CSS cross browser?

I have a field with a class container.

.container
{
 position: absolute;
 border: black 1px solid;
 top: 100px;
 left:100px;
 width: 10px;
 height: 10px;
}

Now, what I want to do is mouse hover (CSS hover) - this will increase the margin to 30 pixels by 30 pixels around the center point somewhere in the approximate center of the 10x10 window, returning to the original container when I exit. Sort of:

.container:hover
{
 width: 30px;
 height: 30px;
 top: 90px;
 left:90px;
}

Now the difficulty is that the positions topand Leftare set in the HTML sent from the database and therefore are not displayed in the CSS file.

, CSS ( , ), Javascript onmouseover onmouseout . , . eeeugh.

, , CSS?

+3
4

/, ( , )

.container:hover
{
 width: 30px;
 height: 30px;
 margin-left:-10px;
 margin-top:-10px;
}

demo http://jsfiddle.net/gaby/CuuNW/

, , .

30 10 20 . ( ) 20/2 = 10 .

+4

, Javascript - .

- , .

, , " CSS", , Javascript - . CSS , , .

+2

top left, HTML, !important stylesheet.

.container:hover
{
 width: 30px;
 height: 30px;
 top: 90px !important;
 left:90px !important;
}
0

.container , left top ?

, left top :hover .container, , left top .container .

, :

<div class="container-parent">
    <div class="container">
        ...   
    </div>
</div>

.container-parent top left. CSS :

.container-parent{
    left:224px; /* from DB */
    position: absolute;
    top:128px; /* from DB */
}

.container
{
 position: absolute;
 border: black 1px solid;
 top: 100px;
 left:100px;
 width: 10px;
 height: 10px;
}

.container:hover
{
 width: 30px;
 height: 30px;
 top: -15px; /* new width / 2 to center box */
 left:-15px; /* new height / 2 to keep things centered */
}

.container , , left top , :hover -15px left top. , left top - 15px.

, ?

0

More articles:


All Articles