CSS: округлый угол div при наведении

Я пытаюсь сделать что-то, что казалось довольно простым...

у меня 3 div s, которые содержат радио кнопку и некоторый контент:

     Content of DIV1,
[]   this can be as long or as tall
     as wanted

[]   Content of DIV2

[]   Content of DIV3

Легко создать закругленные углы для каждого элемента, используя любые методы, которые можно найти здесь. Тем не менее, я не смог сделать это только для события hover, то есть я хотел бы, чтобы округленная рамка появлялась вокруг div только тогда, когда на нее наведена мышь. Кто-нибудь видел пример этого где-нибудь?

Изменить: я уже использую Prototype и Scriptaculous. Я не могу добавить JQuery только для этого.

Источник

4 ответа

Решение

Это меняет CSS с помощью jquery при наведении курсора на div

print("<div id="output" class="div"></div>



<script>

    jQuery(document).ready(function() {

    $("#output").hover(function() {
        $(this).css({ 'background-color': 'yellow', 'font-weight': 'bolder' });
    }, function() {

    $(this).css({ 'background-color': 'blue', 'font-weight': 'bolder' });
    });


    }
    );

");

Источник

Частично проблема, с которой вы можете столкнуться, заключается в том, что в большинстве реализаций CSS (и реализации этой технологии в браузере) div не имеет метода:hover, к которому вы можете прикрепить правила стиля.

Как упомянул Энтони, jQuery может обойти это.

Как бы я атаковал его (поскольку я не исследовал jQuery), чтобы установить для вашего тега (у которого есть метод hover) значение display:block, со всеми правилами сопровождения, которые вы бы установили, как если бы это был div, make он расширяется, чтобы заполнить содержащий div, а затем, конечно, добавить ваши правила закругленных углов к наведению.

Другой способ - окружить ваш div тегом a, но опять же, вы по-прежнему устанавливаете display:block, background и другие правила, которые на самом деле не принадлежат a.

Это все грубое злоупотребление синтаксисом, поэтому сделайте резервную копию своей работы, прежде чем пытаться что-либо, что я предлагаю.

Удачи - вероятно, было бы проще просто постоянно округлять его на div и думать о чем-то еще, что вы можете сделать, чтобы вызвать эффект парения.

Источник

Я уверен, что вы могли бы сделать это с помощью jquery.
http://docs.jquery.com/CSS

http://docs.jquery.com/Events/hover

Источник

Css определяет псевдоселектор при наведении курсора, который вы можете использовать для решения вашей проблемы, или используйте javascript для имитации этого эффекта, добавляя / удаляя класс css к правильному div для событий onMouseEnter onMouseOut.

Источник
Другие вопросы по тегам