CSS: округлый угол div при наведении - PullRequest
Новая
       9

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

0 голосов
/ 09 января 2009

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

У меня есть 3 div с радиокнопкой и некоторым содержанием: 

     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 ]

2 голосов
/ 09 января 2009

это меняет 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' });
    });


    }
    );

");

1 голос
/ 09 января 2009

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

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

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

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

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

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

0 голосов
/ 09 января 2009

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

0 голосов
/ 09 января 2009

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

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

...