Css как отключить hover

How to remove/ignore :hover css style on touch devices in Html?

On touch devices, the :hover CSS pseudo-class is not triggered, and therefore the hover styles are not applied. However, some developers still include :hover styles in their CSS, which can result in unexpected behavior on touch devices. To ensure a consistent user experience across all devices, it’s important to remove or ignore the :hover styles on touch devices. In this article, we’ll discuss several methods to achieve this.

Method 1: Media Queries

To remove or ignore the :hover CSS style on touch devices using media queries, you can use the following code:

/* Define the styles for hover on desktop */ a:hover  color: red; > /* Define the styles for touch devices */ @media (hover: none)  a:hover  color: inherit; > >

In the code above, we first define the styles for the :hover state on desktop by targeting the a element. Then, we use a media query to target touch devices by checking if the hover feature is none . Within the media query, we redefine the styles for the a:hover selector to inherit the color property. This will remove the red color applied on desktop when the a element is hovered on touch devices.

Another example using media queries to remove the :hover state on touch devices:

/* Define the styles for hover on desktop */ button:hover  background-color: blue; > /* Define the styles for touch devices */ @media (hover: none)  button:hover  background-color: initial; > >

In this example, we target the button element and define the styles for the :hover state on desktop. Then, we use a media query to target touch devices and redefine the styles for the button:hover selector to have an initial background-color property. This will remove the blue background-color applied on desktop when the button element is hovered on touch devices.

Overall, using media queries is a simple and effective way to remove or ignore the :hover CSS style on touch devices.

Method 2: JavaScript/jQuery

To remove/ignore :hover CSS style on touch devices using JavaScript/jQuery, you can use the following code:

// Check if the device supports touch events if ('ontouchstart' in document.documentElement)  // If it does, remove the :hover CSS style on touchstart $(document).on('touchstart', function() $('*').removeClass('hover'); >); // Add the :hover CSS style on mouseenter $('*').on('mouseenter', function() $(this).addClass('hover'); >); // Remove the :hover CSS style on mouseleave $('*').on('mouseleave', function() $(this).removeClass('hover'); >); >

This code checks if the device supports touch events and if it does, it removes the :hover CSS style on touchstart. It also adds the :hover CSS style on mouseenter and removes it on mouseleave.

You can customize this code to suit your needs. For example, you can change the selector ‘*’ to target specific elements or classes. You can also change the event names and add more events if needed.

To summarize, the steps to remove/ignore :hover CSS style on touch devices using JavaScript/jQuery are:

1. Check if the device supports touch events
2. Remove the :hover CSS style on touchstart
3. Add the :hover CSS style on mouseenter
4. Remove the :hover CSS style on mouseleave

By following these steps and using the provided code example, you can easily remove/ignore :hover CSS style on touch devices using JavaScript/jQuery.

Method 3: Modernizr

To remove or ignore the :hover CSS style on touch devices using Modernizr, follow these steps:

script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"> script>

1. Next, create a CSS class that will target devices with touch capabilities. This class will be used to remove the :hover style.

.no-touch:hover  /* remove or ignore :hover style */ >

1. In your JavaScript file, use Modernizr to detect if the device has touch capabilities. If it does, add the «no-touch» class to the HTML element.

if (Modernizr.touch)  // add "no-touch" class to HTML element document.documentElement.classList.add('no-touch'); >

button class="btn:hover no-touch">Click mebutton>

With these steps, the :hover style will be removed or ignored on touch devices, while still being applied on non-touch devices.

Note: This solution assumes that you have a basic understanding of HTML, CSS, and JavaScript.

Method 4: Pure CSS

To remove or ignore the :hover CSS style on touch devices using Pure CSS, you can use the @media rule with the hover media feature. Here are the steps:

1. In the media query, override the hover styles with the inherit value, which sets the property to the same value as its parent element.

Here is the complete example code:

.button:hover < background-color: #ff0000; color: #fff; >@media (hover: none) < .button:hover < background-color: inherit; color: inherit; >>

This will remove or ignore the :hover CSS style on touch devices using Pure CSS.

Источник

How to Remove the CSS :hover Behavior from an Element

To remove the CSS hover effect from a specific element, you can set the pointer-events property of the element (the hover behavior of which you want to disable) to “none”.

In the example below, we have some buttons created with elements. We set the display of the «button» class to «inline-block» and continue styling this class by specifying the border-radius, border, background, cursor, padding and margin properties. We add the :hover pseudo-class to the «button-blue» and «button-green» classes, but disable this behavior for the «disabled» class with the pointer-events property.

Example of removing the hover behavior with the CSS pointer-events property:

html> html> head> title>Title of the document title> style> .disabled < pointer-events: none; opacity: 0.3; > .button < border-radius: 20px; padding: 10px 15px; border: 1px solid #000; background: #b5b3b3; cursor: pointer; display: inline-block; margin: 10px; > .button-blue:hover < background: #75a4fa; > .button-green:hover < background: #53e05a; > style> head> body> div class="button button-blue"> Hover over this blue button div> br/> div class="button button-green"> Hover over this green button div> br/> div class="button button-blue disabled"> This is a disabled blue button div> br/> div class="button button-green disabled"> This is a disabled green button div> body> html>

Источник

Удалить CSS-поведение «: hover» из элемента

В некоторых случаях я не хочу применять CSS для зависания. Одним из способов было бы просто удалить класс CSS из div с помощью jQuery, но это сломает другие вещи, так как я также использую этот класс для форматирования его дочерних элементов. Итак, это заставило меня задаться вопросом: есть ли способ удалить стили css c hover из элемента?

5 ответов

Я бы использовал два класса. Сохраните свой тестовый класс и добавьте второй класс под названием testhover, который вы добавите только тем, кого хотите навести, — наряду с тестовым классом. Это напрямую не то, что вы просили, но без дополнительного контекста оно кажется лучшим решением и, возможно, самым простым и простым способом сделать это. Пример: HTML:

Используйте псевдокласс класса :not , чтобы исключить классы, на которые вы не хотите применять зависание: FIDDLE

 
blah
 
blah
 
blah
 .test:not(.nohover):hover

Это сработало для меня, но я должен был сделать одно изменение, пробел перед :hover . Это может быть потому, что я использую SASS, не уверен.

Спасибо, я использовал это, чтобы отключить любые эффекты наведения на пользовательские кнопки для сенсорных устройств в моем приложении, добавив класс touchDevice в body и изменив мои правила CSS на что-то вроде body:not(.touchDevice) .button:hover < . >

Один из способов сделать это — добавить:

к элементу, на который вы хотите отключить наведение.

(обратите внимание: это также отключает события javascript на этом элементе, щелчок события на самом деле попадает в элемент позади).

Поддержка браузера (94.62% с 17 октября 2010 года)

Это кажется намного более чистым

/** * This allows you to disable hover events for any elements */ .disabled < pointer-events: none; /**.button < border-radius: 30px; padding: 10px 15px; border: 2px solid #000; color: #FFF; background: #2D2D2D; text-shadow: 1px 1px 0px #000; cursor: pointer; display: inline-block; margin: 10px; >.button-red:hover < background: red; >.button-green:hover

Im a red button hover over me
 
Im a green button hover over me
 
Im a disabled red button
 
Im a disabled green button

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

@MarkBuikema это правда. Отредактировал ответ, чтобы отразить это. Во многих случаях это дополнительный бонус.

раздражает, что это не широко поддерживается. «Не меняйте форматирование при наведении курсора на tab.current» — это поведение, вероятно, предназначенное для большинства навигационных меню. Для тех, кто сообщает о том, чтобы просто использовать 2 класса, рассмотрим, насколько широко распространены библиотеки Bootstrap и Angular Styling на данный момент. Один не просто код 2 класса. Вы, вероятно, распутываете сторонние стили. Беспорядочный. Спасибо за информацию @Olivier-interfaSys Оливье-InterfaSys.

@EleanorZimmermann Я бы сказал, что это широко поддерживается. Во всем мире 90,97% пользователей. Но да, если вы беспокоитесь о IE9, вы должны предоставить другой класс.

@Bodman Бодман, хорошая информация, спасибо. Я использовал ваше решение (мне повезло, что мне не нужно беспокоиться о IE9).

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

События указателя @Bodman нет; Убрал изменение фона при наведении, но также отключил гиперссылку из моего элемента. Как убрать эффект парения, но сохранить гиперссылку?

@BioDeveloper в этом сценарии вы не можете использовать указатель-события: нет. Вам придется использовать одно из других решений.

Источник

CSS Disable hover Effect

In CSS, an element responds by starting transition effects whenever a user hovers over it. It is an effective method for enhancing user experience and is used to draw attention to the crucial components of a web page. To do so, you can set the “pointer-events” CSS property of the element with the value “none”.

This post will explain the method for applying the CSS disable hover effect.

How to Apply CSS Disable hover Effect?

To apply CSS to disable the hover effect, use the CSS “pointer-events” property and set the value of this property as “none”. To do so, follow the given instructions.

Step 1: Make a div Container

First, make a div container with the help of the “ ” element and insert an id or class attribute with a specific name.

Step 2: Insert Heading

Next, utilize the heading tag and embed text inside the heading tag. For that purpose, the tag is used.

Step 3: Add “” Tag

After that, add the “ ” tag, and with the help of “href”, add a URL of the page the link navigates. Also, add a “class” attribute with a particular name and embed text in between the “” tag to display:

Linuxhint Official Website < / h1 >

Step 4: Style “div” Container

Access the div container by using the id value as “#main”:

background-color : rgb ( 173 , 224 , 173 ) ;

Then, apply the mentioned properties listed below:

• “margin” and “padding” both are utilized for specifying the space in the HTML page. Whereas the “margin” is used for adding space outside the boundary, and “padding” is for inside spacing.
• “border” defines a boundary around a particular element.
• “background-color” determines the color at the backside of the element.

Step 5: Disable “hover” Effect

Access the “ ” element with the class name as “.noHover”:

background-color : rgb ( 240 , 116 , 116 ) ;

Next, apply the “pointer-events” property that regulates how HTML components react to mouse/touch, JavaScript click/tap, and active/hover CSS states as well as whether or not the cursor is displayed.

That’s all about CSS disable hover effect.

Conclusion

To apply CSS to disable the hover effect, use the CSS “pointer-events” property and set the value of this property as “none”. The pointer-event property is utilized for regulating how HTML components react to mouse/touch, JavaScript click/tap, and active/hover CSS states, as well as whether or not the cursor is displayed. This post has demonstrated the method for applying CSS to disable hover effect.

Источник

Читайте также:  Javascript switch case all