CSS: наведите курсор для принудительного смещения элемента в кросс-браузерном решении - PullRequest
Новая
       21

CSS: наведите курсор для принудительного смещения элемента в кросс-браузерном решении

3 голосов
/ 25 мая 2011

У меня довольно интересная проблема, и я подумал, можно ли это сделать исключительно в CSS. Я знаю, что вы можете использовать webkit moz transforms или javascript, но есть ли другое простое кросс-браузерное решение CSS для этого?

У меня есть коробка с контейнером класса, скажем 

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

Теперь я хочу, чтобы при наведении курсора мыши (при наведении курсора CSS) окно увеличивалось до 30 на 30 пикселей вокруг центральной точки где-то в приблизительном центре поля 10x10, возвращаясь к исходному контейнеру, когда я выкидываю курсор мыши. Что-то вроде: 

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

Теперь трудность заключается в том, что позиции top и Left устанавливаются в HTML-код, отправляемый из базы данных, и поэтому не отображаются в файле CSS.

Возможность заключается в том, что я динамически генерирую файл CSS из данных БД и эффективно создаю класс для каждого объекта (я действительно считаю, что это плохая идея), или я использую Javascript для управления некоторыми вычислениями onmouseover и onmouseout но это кажется мне не очень элегантным Это то, что я делаю сейчас. eeeugh.

Итак, ребята, есть ли лучшее решение CSS?

Ответы [ 4 ]

4 голосов
/ 25 мая 2011

Если это только верх / лево, вы можете игнорировать их и использовать поля для их перемещения ( при условии, что вы знаете размеры ) 

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

демо http://jsfiddle.net/gaby/CuuNW/

Важным расчетом является то, что запас должен соответствовать половине увеличения размера, которое происходит при наведении.

так, конечный размер 30 пикселей минус 10 пикселей начального размера составляет 20 пикселей. Вам необходимо сместить ( с использованием полей ) 20/2 = 10 пикселей.

2 голосов
/ 25 мая 2011

По моему мнению, Javascript является самым элегантным решением.

Целью сценариев на стороне клиента является взаимодействие на стороне клиента, и это именно то, что вы пытаетесь сделать.

По сути, это не ответ на ваш вопрос " есть ли лучшее решение CSS ", но я думаю, что Javascript лучшее решение . Решение CSS было бы в лучшем случае хакерским и, вероятно, не сработало бы.

0 голосов
/ 25 мая 2011

Как насчет упаковки .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 голосов
/ 25 мая 2011

Вы можете переопределить стили top и left, отправляемые с HTML, используя !important в вашем stylesheet. 

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