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

StackOverflow https://stackoverflow.com/questions/428280

  •  06-07-2019
  •  | 
  •  

Вопрос

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

У меня есть 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 только для этого.

Это было полезно?

Решение

это меняет 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, расширил бы его, чтобы заполнить содержащий div, и затем, конечно, добавил бы ваши правила закругленных углов в hover.

Другой способ заключается в том, чтобы окружить ваш 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.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top