Блог

Главная - Вопросы по программированию - jquery переключает дочерние классы при наведении

jquery переключает дочерние классы при наведении

#javascript #jquery #css

#javascript #jquery #css

Вопрос:

Я пытаюсь переключить класс для дочерних элементов в элементе при наведении. Но я делаю что-то не так .. не могу понять, что

Допустим, у меня есть этот svg в html:

 <svg id="toplogo" height="200" width="200" alt="" viewBox="0 0 492.69 617.696">
<circle class="fill" fill="#00bbff" stroke="#000000" stroke-width="32" stroke-miterlimit="10" cx="246.16" cy="222.62" r="206.843"/>
</svg>

И этот jquery (внутри готового документа):

 $("#toplogo").hover(function() {

$(this).children('.fill').toggleClass('hoverfill');

});

И этот css:

 .hoverfill {
    fill: #ff0000;
}

Ничего не происходит. Заполнение не изменяется

Смотрите это на http://jsfiddle.net/k4djq/1 /

Но это работает, когда я тестирую с

 $("#toplogo").hover(function() {

$(this).children('.defaultstroke').css("fill","#ff0000");

});

Комментарии:

1. не уверен, почему это не работает, но нужен ли вам jquery здесь? .fill:наведите курсор { fill: #ff0000; }

2. Хм, странно. Похоже, это проблема браузера.. Здесь не работает в Chrome, Firefox, IE11 или Opera. Но Safari в порядке. РЕДАКТИРОВАТЬ: о, вы отредактировали свой комментарий (или, возможно, он был удален)

3. @nevermind Я пробовал это .. но при использовании наведения курсора на круг сама точка наведения кажется обводкой круга (очень узкой), а не всего изображения. Это должно быть все изображение (#toplogo). Есть ли способ добиться этого с помощью css?

Ответ №1:

Обновить

Лучше использовать css для получения эффекта наведения / снятия с наведения

Рабочая демонстрация

 #toplogo:hover circle {
    fill: #ff0000;
}

ДЕМОНСТРАЦИЯ

Попробуйте .attr() , .add/toggleClass() не работает с SVG,

 $("#toplogo").hover(function() {

    $(this).children('.fill').attr('class','hoverfill');

});

Также атрибут circle имеет значение fill, поэтому вы можете использовать :

 $(this).children('.fill').attr('fill','#ff0000');

Ссылка :

jQuery предназначен для работы с HTML DOM (и XML DOM). Однако SVG DOM немного отличается, и не все функции jQuery работают корректно.

Для его работы доступны некоторые плагины :

http://keith-wood.name/svg.html#dom

Комментарии:

1. Это работает. Пока все хорошо 🙂 Как мне отменить наведение на предыдущее значение по умолчанию, не устанавливая его? Я думаю, это вопрос повторного удаления класса hoverfill, нет?

2. но снова удалить класс там не будет работать. Я думаю, вам нужно это установить.

3. @mowgli, обновленный с вашей проблемой, проверил мой ответ. Раздел обновления

4. Кажется, это работает нормально.. Но дело в том, что мой настоящий логотип состоит из нескольких элементов, и при наведении должно изменяться не только окружность. Возможно ли это только с помощью css?

5. Может быть, мне следует использовать jquery .. и получить значение цвета по умолчанию для элементов, а затем установить его одним наведением: out

Ответ №2:

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

Попробуйте это:

Полностью удалите функцию и просто добавьте следующий CSS-селектор

 #toplogo:hover .fill { fill: #ff0000; }

Это сделает именно то, что вы хотите, и избавит от необходимости писать некоторый код.

Комментарии:

1. Могу ли я настроить таргетинг на несколько элементов с помощью этого?

2. ДА. Вы ограничены только параметрами селекторов, и даже без использования новых параметров CSS3 у вас все еще есть множество, ну, вариантов

3. Это также правильный ответ, но не может принимать более одного. Спасибо

Ответ №3:

Я думаю, вам нужно использовать attr вместо class того, чтобы вызывать цвет из attr fill

js

 $("#toplogo").on("mouseenter mouseleave", 
             function(e){
                 var color = $("#orgColor").attr("color");
                 if(e.type == "mouseenter"){
                     $(this).children('.fill').attr("fill", "blue");
                 }
                 else if(e.type == "mouseleave"){
                     $(this).children('.fill').attr("fill", color);
                 }

});

скрипка

Также я добавляю скрытый ввод в ваш html, чтобы сохранить исходный цвет. Проверьте скрипку.

Комментарии:

1. Как мне отменить наведение на предыдущее значение по умолчанию, не устанавливая его?

Метки: