Блог

Главная - Вопросы по программированию - Есть ли способ изменить свойство стиля значка при наведении курсора мыши на тег ?

Есть ли способ изменить свойство стиля значка при наведении курсора мыши на тег ?

#css

#CSS

Вопрос:

 lt;div class="todo-container"gt;  lt;div class="todo-item" v-bind:class="{'is--completed': todo.completed}"gt;  lt;label class="todo-title"gt;  lt;input type="checkbox" v-on:change="markComplete"gt;  lt;div class="checkmark"gt;lt;/divgt;   lt;h3gt;{{ todo.title }}lt;/h3gt;  lt;/labelgt;  lt;div class="action-container"gt;  lt;i @click="$emit('del-todo', todo.id)" class="action far fa-trash-alt"gt;lt;/igt;  lt;/divgt;  lt;/divgt; lt;/divgt;

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

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

1. Правильно, если вы хотите сделать это только в обычном CSS, это не будет работать с такого рода структурой.

2. @CBroe так ты говоришь, что я должен придерживаться решения, которое я нашел? Мне трудно заставить значки плавать вправо, на самом деле, поэтому у меня такая структура.

3. Нет, все, что я говорю, это то, что если вам нужно чистое решение CSS, то то, что вы хотите изменить, должно быть следующим родным братом h3, соответственно, потомком, который находится внутри родного брата. Если вы не можете работать с такой структурой для любого другого визуального эффекта, который вам нужен, вам нужно другое решение, включающее JavaScript.

4. Возможно, вы могли бы отредактировать свой вопрос, чтобы точно указать, какой эффект вы хотите, а также показать, что не сработало. Это звучит так, как будто реальный вопрос звучит примерно так: «Как мне поместить этот значок справа от h3 и показать его при наведении h3»? Конечно, есть более подробная информация, если она просто отображается при наведении на h3, она исчезнет, когда вы попытаетесь щелкнуть по ней.

5. И размещение значка как родного брата h3, вероятно, не имело бы большого смысла здесь для начала — вы хотите, чтобы это запускало другую функциональность, тогда что делает нажатие на h3/метку, верно? Тогда он не должен быть вложен в метку, что может вызвать проблемы с доступом.

Ответ №1:

Если значок помещен как часть самого h3, то это решает две проблемы.

  • Значок может отображаться при наведении курсора h3, и он остается видимым, когда пользователь нажимает на него.
  • Он может быть расположен правильно, и когда он появляется, он не сдвигает никакие другие элементы. 
     lt;stylegt;  h3 gt; i {  opacity: 0;  }  h3:hover gt; i {  opacity: 1;  }  lt;/stylegt;  lt;div class="todo-container"gt;  lt;div class="todo-item" v-bind:class="{'is--completed': todo.completed}"gt;  lt;label class="todo-title"gt;  lt;input type="checkbox" v-on:change="markComplete"gt;  lt;div class="checkmark"gt;lt;/divgt;   lt;h3gt;{{ todo.title }}lt;i @click="$emit('del-todo', todo.id)" class="action far fa-trash-alt"gt;lt;/igt;lt;/h3gt;  lt;/labelgt;  lt;/divgt;  lt;/divgt;

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

1. ДА. Я попробовал такую структуру. Но тогда проблема в том, что некоторые задачи не равны по длине (с точки зрения символов), что дает мне возможность добавить свойство в каждую задачу, просто чтобы их соответствующий значок удаления плавал справа. Что я тоже пробовал раньше, и это заставляет меня в конечном итоге задать этот вопрос.

2. Хорошо, я возвращаюсь к тому, чтобы попросить вас изменить свой вопрос, чтобы указать, какого результата вы хотите.

Метки: