Изменить цвет кнопки при наведении мышкой в css: Как изменить цвет кнопки только при наведении на нее?

Разное 

Содержание

Как изменить цвет кнопки только при наведении на нее?



Это то, что я использую? Кажется, это не работает.

<style>
    button:hover {
    background-color : red;
}
</style>
html css
Поделиться Источник Aamir     24 марта 2015 в 12:36

2 ответа


2

Возможно, вы также хотите нацелиться на <input type="submit"> и другие кнопки.

Вы можете сделать это с помощью нескольких селекторов:

button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover {
    background-color: red;
}

button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover {
  background-color: red;
}
<button>Button</button>
<input type="button" value="Button" />

См. пример http://jsfiddle.net/toothbrush7777777/zqgypwzb/1/ .

Поделиться Toothbrush     24 марта 2015 в 12:41


0

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

HTML:

    <button>Button</button>

CSS:

    button.test:hover{
    background-color: red;
    }

FIDDLE

Поделиться rajesh     24 марта 2015 в 13:04

Похожие вопросы:


Как изменить цвет кнопки при нажатии на нее

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


Google Apps Script: как изменить цвет текста метки при наведении курсора?

Я использую Google Apps Script и относительно новичок в нем. Мне интересно, есть ли способ изменить цвет текста для метки при наведении на нее курсора мыши? Например, как иногда гиперссылки меняют…


Как изменить цвет кнопки при наведении на нее курсора?

Я знаю, что этот вопрос, вероятно, задавался много раз, но я видел некоторые ответы и действительно не понимаю. В принципе, я хочу изменить цвет кнопки при наведении на нее курсора. Вот мой код CSS…


Установите цвет BG кнопки на ttransparent при наведении курсора мыши

Как я могу изменить цвет фона этой кнопки при наведении/нажатии на нее? Вот это изображение: http://i.minus.com/ib0pWwQBJ6nlW9.JPG


Как изменить название кнопки при наведении мыши

Q-когда для кнопки используется действие наведения мыши (N.B: кнопка имеет имя-текст, который она показывает в разделе свойства — мы хотим изменить это имя при наведении мыши на нее, а также…


как изменить стрелку и поставить вместо нее треугольник в react-select и при наведении изменить цвет?

как изменить стрелку и поставить вместо нее треугольник в react-select и при наведении изменить цвет? <Select styles={customStyles} defaultValue={[colourOptions[2], colourOptions[3]]} isMulti…


Как изменить цвет звезды при наведении на нее курсора в Woocommerce обзорах?

Как изменить цвет звезды при наведении на нее курсора в Woocommerce обзорах? Я пытаюсь изменить синий цвет при наведении на какой-то другой, но пока безуспешно. p.stars.selected a.active:before {…


CSS цвет кнопки только изменить цвет фона слова нет целой кнопки при наведении курсора

Я хочу, чтобы кнопка при наведении меняла цвет фона, но моя кнопка css меняет только цвет фона слова, а не весь цвет кнопки при наведении. Что-то не так в моем css? фрагмент добавлен .popup1_btn {…


Как сделать ссылку внутри кнопки Изменить цвет при наведении курсора без наведения курсора на ссылку

Моя ссылка меняет цвет при наведении на нее непосредственно но не меняет цвет при наведении на кнопку а не на ссылку непосредственно btn:hover{ color: black; } Это не работает. a:hover{ color:black…


Как изменить градиент кнопки при наведении на нее курсора мыши

Как можно изменить градиент при наведении курсора мыши на кнопку? Смотрите кнопки Read More здесь, чтобы увидеть этот эффект в действии: https://carney.co/daily-carnage/ . Обратите внимание, как при…

CSS Button Меняется Цвет При Наведении Мыши



У меня есть контактная форма, созданная плагином wpforms. Там он хочет, чтобы я ввел любое имя класса в пустое поле, чтобы изменить все, что я хочу. Допустим, я хочу изменить цвет фона submit button

Код css, который я создал, таков

.contactform1 button[type=submit] {
background-color: #b49543;
}

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

Не могли бы вы мне помочь, пожалуйста ? Заранее благодарю вас!

html css class button hover
Поделиться Источник André Yuhai     02 марта 2017 в 03:25

3 ответа

  • Button цвет не меняется при наведении мыши на button

    Я написал следующий код XAML. Я добавил код стиля, чтобы изменить цвет button, когда мышь наведена на button. Но хотя эффект границы присутствует при наведении курсора на button, фон не меняется на красный. Пожалуйста, совет. <Window.Resources> <BooleanToVisibilityConverter…

  • Меняется Цвет При Наведении Мыши CSS

    На этом сайте есть 4 вкладки на главной странице. Как я могу изменить зелено-голубоватый цвет при наведении курсора мыши на вкладку? a { -webkit-transition-property: color; -moz-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -moz-transition-duration:…


2

Сделайте это следующим образом используйте селектор

:hover из css

.contactform1:hover {
background-color: #b49543;
}

Поделиться Mandarr Sant     02 марта 2017 в 03:26


2

Поставьте a :наведите курсор на button.

.contactform1 button:hover{
    background-color: #b49543;
}

Поделиться Dubliyu     02 марта 2017 в 03:28


2

Вот фрагмент того, как это выглядит с атрибутом hover. Как вы можете видеть, это не влияет на входные данные button или другие типы button.

.contactform1 button[type=submit]:hover {
  background-color: #b49543;
}
<div>
  <button type="submit">button Submit</button>
  <input type="submit" value="input Submit" />
  <button type="reset">button Reset</button>    
  <button type="button">button Button</button>
</div>

Обновление в ответ на OP: CSS следует методологии структурирования данных First in First out. Таким образом, вы можете ожидать, что этот тип потока произойдет, когда вы имеете дело с вашим CSS. Попробуйте поставить конкретный CSS после всего остального.

Дальнейшие обновления: я заглянул в ваш скриншот. Похоже, вам не нужен тип button hover. просто использовать

. contactform1:hover{
   background-color: #b49543;
}

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

Поделиться MrAmazing     02 марта 2017 в 03:43

  • только частичное изменение текста при наведении курсора мыши на button

    Я бы хотел, чтобы цвет шрифта текста в button изменился на белый и без подчеркивания при наведении курсора на button. На данный момент цвет текста меняется только тогда, когда вы наводите курсор на сам текст, а еще не при наведении курсора на button. Поэтому, когда вы перемещаетесь по button,…

  • при наведении мыши цвет текста не меняется

    Я знаю простой вопрос, но цвет текста не менялся при наведении курсора мыши на меню. Я знаю, что пропустил одно место. Но я хочу помочь тебе. Это ссылка на демо-страницу: CodePenio Меню, указывающее на изменение цвета фона, но цвет текста не меняется. При наведении курсора мыши на пункт меню Цвет…

Похожие вопросы:


Стоп button изменение цвета при наведении курсора мыши

ok..this очень strange….i определили button, на самом деле 5 кнопок, и каждая имеет свой цвет, но при наведении мыши они просто меняют цвет на тот ледяной синий color….i попытался переопределить…


sencha touch3: указатель мыши меняется на курсор при наведении на button

Я заметил некоторые проблемы с моими пуговицами. Я создал button, и при наведении курсора мыши указатель мыши меняется на курсор. Я знаю, что в мобильном телефоне у нас не будет курсора, поэтому…


CSS стиль-цвет заголовка при наведении мыши

Кто — нибудь может помочь мне с этим кодом css для расширения Joomla 2. 5-слайдера заголовка новости RSS. У него очень плохой стиль css — #RSS-SHOW-SETTING1 p { width:100%; vertical-align:middle;…


Button цвет не меняется при наведении мыши на button

Я написал следующий код XAML. Я добавил код стиля, чтобы изменить цвет button, когда мышь наведена на button. Но хотя эффект границы присутствует при наведении курсора на button, фон не меняется на…


Меняется Цвет При Наведении Мыши CSS

На этом сайте есть 4 вкладки на главной странице. Как я могу изменить зелено-голубоватый цвет при наведении курсора мыши на вкладку? a { -webkit-transition-property: color; -moz-transition-property:…


только частичное изменение текста при наведении курсора мыши на button

Я бы хотел, чтобы цвет шрифта текста в button изменился на белый и без подчеркивания при наведении курсора на button. На данный момент цвет текста меняется только тогда, когда вы наводите курсор на…


при наведении мыши цвет текста не меняется

Я знаю простой вопрос, но цвет текста не менялся при наведении курсора мыши на меню. Я знаю, что пропустил одно место. Но я хочу помочь тебе. Это ссылка на демо-страницу: CodePenio Меню, указывающее…


Предотвратить переход CSS Hover при наведении мыши

Я создал кнопку с помощью CSS,в которой цвет фона становится светлее при наведении мыши и сразу же становится темнее при наведении мыши. Проблема в том, что я хочу поддерживать состояние зависания…


datagridview ячейки при наведении мыши меняется цвет фона

я хочу изменить задний цвет ячейки в datagridview при наведении курсора мыши на конкретную ячейку. Пробовал код: private void dataGridView_whateventwillcomehere(object sender,…


JavaFX/CSS: скрасьте оригинальный цвет кнопки при наведении курсора мыши

У меня есть множество кнопок, каждая со своим собственным цветом фона (-fx-background-color: rgb (xxx,xxx,xxx). Цвета кнопки определяются в файлах .fxml. Теперь я хотел бы определить в файле .css…

Изменить цвет кнопки при наведении мышкой в css


Чтобы изменить значок и текстовый цвет кнопки при наведении курсора мыши в компонент меню

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

Но я могу дать только фоновый цвет при наведении мыши, но не смог изменить текстовый цвет при наведении мыши.

Я попытался дать цвет:! Important; также, по-прежнему нет результата.

Вот ссылка stackblitz.

задан Prashanth GH 17 сент. ’18 в 12:57

источник поделиться

Изменить цвет текста при наведении курсора

В программе WYSIWYG Web Builder возможно несколькими способами изменить цвет у текста при наведении на него курсора мыши. Ниже будет представлено несколько таких вариантов с использованием псевдокласса hover.

Пример текста, изменяющего свой цвет:

Демо-пример: наведите курсор мыши на этот текст

В HTML исходнике текста во вкладке — Перед тегом — прописать:

#wb_uid2:hover {color:#FF0000;}

Описание значений:

#wb_uid12 — это id текста (его можно посмотреть в исходном коде страницы).

#FF0000 — это цвет текста, на который он изменится при наведении курсора.

Этот способ подходит для программы WYSIWYG Web Builder 11 / 12 версии.

Второй способ для изменения цвета текста при наведении курсора мыши, подходит для WYSIWYG Web Builder 10 / 11 / 12 версии. Здесь будет использоваться id текста, который вы можете сами прописать, через программу.

Пример текста, изменяющего свой цвет:

Демо-пример: наведите курсор мыши на этот текст

В HTML исходнике текста во вкладке — Перед тегом — прописать:

#wb_DemoPrimer2 > span:hover {color:#3A88AF !important;}

Описание значений:

DemoPrimer2 — это id текста, который вы можете прописать в программе.

#3A88AF — это цвет текста, на который он изменится при наведении курсора.

Этот способ подходит для программы WYSIWYG Web Builder 10 / 11 / 12 версии.

В данном способе цвет текста будет изменён при наведении курсора мыши на слой с текстом. Здесь будет использоваться id слоя, который вы сможете прописать, через программу в контекстном меню — Сменить ID.

Пример текста, изменяющего свой цвет в слое:

Демо-пример: наведите курсор мыши на этот слой с текстом

В HTML исходнике текста во вкладке — Перед тегом — прописать:

#DemoPrimer3:hover span{color:#2BAECA !important;}

Описание значений:

DemoPrimer3 — это id слоя, который вы можете прописать в программе.

#2BAECA — это цвет текста, на который он изменится при наведении курсора.

Данный способ работает в программе WYSIWYG Web Builder 11 / 12 версии.

Как изменить в таблице цвет фона при наведении на неё курсора мыши

Всем привет! Сегодня поступила задача задать цвет фона строки таблицы и цвет текста при наведении на неё курсора мыши средствами CSS. Вид таблицы при этом должен стать более изящным и дружественным к посетителю сайта. Кроме того работа с таблице должна быть более комфортной: посетитель, проходят мышью по таблице, мог визуально контролировать на какой строке он фокусирует свой взгляд

Решение

Стиль элемента при наведении на него курсора мыши определяется с помощью псевдокласса :hover, он добавляется к нужному селектору.

Для изменения стиля строки таблицы, :hover следует добавить к селектору tr, задав желаемый цвет фона через свойство background.

Например:

tbody tr:hover { background-color: whitesmoke; }
background-color: whitesmoke;

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Примеры для изменения цвета фона, текста с помощью CSS

Рассмотрим несколько примеров по изменению CSS:

 

Пример 1. Изменение фона.

В этом примере мы рассмотрим, как можно изменить фон в каталоге. Первоначально каталог выглядит так:

 

Выбираем с помощью Firebug (кнопка F12) необходимый нам элемент:

 

Чтобы изменить фон этого элемента, скопируем нужный нам код и вставим его в редактор CSS, внеся необходимые изменения:

 

Красной рамкой обведен код, который мы вставляем сейчас.  После сохранения цвет фона элемента изменился на выбранный нами:

 

Пример 2. Изменение цвета кнопки.

Изменим цвет кнопки «Обратный звонок». Мы хотим сделать так, чтобы изменился ее цвет до нажатия с оранжевого на изумрудный:

 

Выбираем необходимый элемент:

 

Добавляем код, который изменяет цвет кнопки до нажатия:

 

И, нажав на кнопку «Сохранить», смотрим на результат:

 

Пример 3. Изменение шрифта.

Теперь изменим шрифт кнопки «Корзина товаров». Выбираем нужный нам элемент, ищем нужный участок кода:

 

Мы хотим сделать эту надпись синей, отображать ее увеличенной и с курсивом. Для этого вставляем следующий код:

И видим, как изменилась кнопка «Корзина товаров»:

 

Пример 4. Изменение стиля заголовков.

При редактировании заголовков не появляется поле визуального редактора, и изменить их цвет, размер и шрифт можно только с помощью CSS. Итак, выбираем заголовки и видим, что у класса «h3_content» нет определенного готового правила.

 

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

И после сохранения изменений посмотрим на изменившиеся заголовки:

 

Пример 5. Изменение стиля ссылок.

Ссылка может иметь несколько состояний. Например, есть посещенные и непосещенные ссылки, также можно задавать выделение ссылки курсором. Возьмем страницу с 3 ссылками, выделим ссылку курсором и в окне firebug в разделе «Стиль» нажмем на style.css?106(строка 165).

 

Как только мы кликнем на эту ссылку, раскроется файл style.css на 165 строке, и мы сможем увидеть, как описаны правила ссылок.

Псевдокласс link отвечает за непосещенные ссылки, visited — за посещенные. Псевдокласс hover срабатывает при наведении курсора. Изменим цвет непосещенных ссылок на зеленый, цвет посещенных — на красный, а при наведении цвет сделаем фиолетовым и уберем подчеркивание ссылки (за это отвечает правило text-decoration:none):

Теперь ссылки внешне выглядят совершенно по-другому:

 

Пример 6. Сдвиг и размер блоков.

За расстояние между элементами отвечает правило margin, за расстояние между контентом элемента и его границей — padding. Изменить ширину блока можно с помощью правила width. Выберем элемент, который мы будем изменять:

Теперь запишем следующие изменения: увеличим padding до 100 пикселей и установим отступ margin сверху и слева по 50 пикселей:

Внешний вид элемента станет таким:

Теперь изменим ширину элемента. Выделяем нужный элемент:

 

и добавляем измененное правило для класса .right_block — уменьшим его ширину width на 200 пикселей:

 

Теперь блок стал заметно уже:

 

Пример 7. Рамки блоков.

Вы можете изменять границу блоков с помощью правила border — например, задавать закругление с помощью border-radius. Также в данном примере рассмотрим, как добавлять тень к элементу с помощью box-shadow. 

Поставим больше закругление у элемента — увеличим значение border-radius до 50 пикселей, саму границу сделаем жирнее (5 пикселей) и сделаем ее зеленой, также добавим черную тень снизу и справа с помощью box-shadow:

Окончательно элемент будет выглядеть так:

 

Пример 8. Скрыть элемент.

Вы можете скрыть любой элемент с помощью правила display: none. В качестве примера скроем надпись в футере сайта:

Добавим в CSS-редактор правило для класса footer_text, изменив значение параметра display:

Теперь выбранный текст из футера не будет виден пользователям:

 

Пример 9. Заменить логотип.

Изначально в шаблонах прописан определенный размер логотипа, и, чтобы залить картинку больше, необходимо сначала скрыть существующий логотип и загрузить новое изображение с помощью background.

Так логотип выглядел до изменений:

 

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

После внесения данных правил логотип выглядит следующим образом:

html — CSS — изменить цвет фона кнопки при наведении

html — CSS — изменить цвет фона кнопки при наведении — qaru

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил

Просмотрено 92к раз

На этот вопрос уже есть ответы здесь :

Закрыт 6 лет назад.

Мне нужно изменить цвет фона кнопки при наведении курсора.

Мой CSS на jsfiddle: CSS

Мой HTML:

ДЕМО

Создан 18 июл.

пользователь 3272321

5911 золотой знак11 серебряный знак44 бронзовых знака

1

Добиться этого можно следующим образом.Это решение будет работать, если вы добавите этот класс внизу вашего CSS.

  .btn: зависать
{
фоновое изображение: нет;
цвет фона: # ff00ff;
}

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

  .btn: зависать
{
фоновое изображение: нет! важно;
цвет фона: # ff00ff! important;
}

ДЕМО

Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *