Document

Как отменить :hover при клике

При наведении на слово меню, появляется меню. Если убрать мышку с меню, оно плавно исчезнет. Я не понимаю, как можно при клике на меню с пунктами закрыть его.
Мне пришло в голову только добавлять класс при клике, а в css написать, что показывать меню, если у элемента если нету класса .disable
Но при таком решении класс .disable остаётся у элемента, и меню не появляется при наведении.
Я попробовал ловить событие transitionend и убирать у элемента класс disable, но меню появляется заново

.menu:hover .menu__wrapper:not(.disable)

menu__wrapper.addEventListener('click', () => < menu__wrapper.classList.add('disable'); >); menu__wrapper.addEventListener('transitionend', () => < menu__wrapper.classList.remove('disable'); >);

*, *:before, *:after < -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; >html < scroll-behavior: smooth; >body < margin: 0; font-size: 16px; font-family: 'Open Sans', sans-serif; >.menu < max-width: 80px; margin-left: 50px; display: block; text-align: center; position: relative; >.menu span < display: block; >.menu__wrapper < position: absolute; right: 3px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-direction: column; border: 1px solid red; opacity: 0; visibility: hidden; transition: visibility .2s ease-in-out, opacity .2s ease-in-out; >.menu__item < padding: 5px 10px 0 10px; >.menu__item:last-child < padding-bottom: 5px; >.menu:hover .menu__wrapper:not(.disable)

 Меню 
1 текст
 
2 текст
 
3 текст
 
4 текст
 
5 текст
 
6 текст
 
7 текст
 
8 текст
 
9 текст
 
9 текст
 
9 текст
 
9 текст
 
 

Легче всего вообще-то для hover заготовить отдельный класс который удалять при необходимости, вот это проще

2 ответа 2

Написано с использованием JQuery. Хочу сразу заметить, что в строковой тег span нельзя вставлять блочные теги.

$('.menu__wrapper').click(function()< $('.menu__wrapper').css('visibility', 'hidden') >); $('.text__menu').hover(function()< $('.menu__wrapper').css('visibility', 'visible') >);

 
Меню 
1 текст
 
2 текст
 
3 текст
 
4 текст
 
5 текст
 
6 текст
 
7 текст
 
8 текст
 
9 текст
 
9 текст
 
9 текст
 
9 текст
 
 

Легче всего оказалось прописать в JS наведение и отведение мыши, заместо :hover в CSS , а также при клике убирать класс
1) При наведение мышки добавляется класс( .active ), который отвечает за появлению меню, а также добавлять style.cursor = pointer , чтобы мышка была того вида, которой можно кликнуть
2) При отведении этот класс удаляется
3) При клике этот класс также удаляется и добавляется style.cursor = default

Без манипуляций с курсором, при клике на меню(закрытии), если не двигать мышкой, то курсор останется таким, которым можно кликнуть, если в CSS было прописано, что у блока cursor: pointer

let menu = document.querySelector('.menu'); let menu__wrapper = menu.querySelector('.menu__wrapper'); menu.addEventListener('mouseover', () => < menu__wrapper.classList.add('active'); menu__wrapper.style.cursor = 'pointer'; >); menu.addEventListener('mouseout', () => < menu__wrapper.classList.remove('active'); >); menu__wrapper.addEventListener('click', () => < menu__wrapper.classList.remove('active'); menu__wrapper.style.cursor = 'default'; >);

*, *:before, *:after < -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; >html < scroll-behavior: smooth; >body < margin: 0; font-size: 16px; font-family: 'Open Sans', sans-serif; >.menu < max-width: 80px; margin-left: 50px; display: block; text-align: center; position: relative; >.menu span < display: block; >.menu__wrapper < position: absolute; right: 3px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-direction: column; border: 1px solid red; opacity: 0; visibility: hidden; transition: visibility .2s ease-in-out, opacity .2s ease-in-out; >.menu__wrapper.active < opacity: 1; visibility: visible; >.menu__item < padding: 5px 10px 0 10px; >.menu__item:last-child

 Меню 
1 текст
 
2 текст
 
3 текст
 
4 текст
 
5 текст
 
6 текст
 
7 текст
 
8 текст
 
9 текст
 
9 текст
 
9 текст
 
9 текст
 
 

Источник

Remove ‘:hover’ CSS behavior from element

In some cases, I don’t want to apply CSS on hover. One way would be to just remove the CSS class from the div using jQuery, but that would break other things since I am also using that class to format its child elements. Is there a way to remove ‘hover’ css styling from an element?

6 Answers 6

One method to do this is to add:

to the element, you want to disable hover on.

(Note: this also disables javascript events on that element too, click events will actually fall through to the element behind ).

This seems to be much cleaner

/** * 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

I'm a red button hover over me
 
I'm a green button hover over me
 
I'm a disabled red button
 
I'm a disabled green button

annoying that this isn’t widely supported. «don’t change formatting on hover of tab.current» is a behavior probably intended on most nav menus. For those reporting to simply use 2 classes, consider how widely prevalent Bootstrap and Angular styling libraries at this point. One doesn’t simply code 2 classes. You are probably detangling 3rd party styles. Messy. Thanks for info @Olivier-interfaSys .

@EleanorZimmermann I would say that this is widely supported. Globally 90.97% of users. But yes, if you are worried about IE9 , you should provide another class.

@Bodman pointer-events: none; Removed the on-hover background change but also disabled hyperlink from my element. How to remove hover effect but retain hyperlink?

Источник

CSS disable hover effect

I need to disable the mouse hover on a particular button(not on all buttons) in the entire DOM. Please let me know how to achieve it using a CSS class. i am using the below CSS class when my button is disabled. now i want to remove the hover effect using the same class.

The above class will take care of removing the hand sign and text underline on mouse over . Now i want to remove hover effect also. Please let me know.

15 Answers 15

I have really simple solution for this.

and use this to disable any event on it. use it like:

Well this disable all kind of events on the element as well. In this scenario, all button would become unclickable.

@ Shikatsu Kagaminara. This only disables the event for the element you apply the class to. I may not understand what the problem you and 25 other people have with this solution.

won’t affect any other element with only the hover class.

I agree. This is a very useful property in the current use case. A disabled control is generally not something you want users interacting with. Any sign that a user can interact with the control just adds to the confusion. Disabling all pointer events is a neat trick and it seems to be well supported.

@AltimusPrime : The problem is that question asks for a solution to disable mouse hover. But this solution disables all mouse events. So the button wont even receive click events for example.

You can achieve this using :not selector:

In this way you apply the hover effect style when a specified class (.disable) is not applied.

The :not selector is used the apply style to all elements that DON’T have the class specified between brackets. In this case we’re specifying style on hover on all elements with class ‘button’ which don’t have the class ‘disable’. Hope it’s clear now 🙂

I think he meant the amperstand, this is SCSS and not plain CSS, it needs to be compiled, but the question is only about CSS and not SCSS, so this answer could use an edit

Here is way to to unset the hover effect.

.table-hover > tbody > tr.hidden-table:hover > td

I don’t believe it’s recommended to use the !important indicator. I think that’s only reserved for special cases only, which doesn’t apply here.

It applies if the element already has property with !important set and you can’t change that because of the lib of framework used, then this use is warranted. From the question you can see the element does have it with !important already so it’s the only way to overwrite it

For this I ended up using an inline style because I only wanted the one particular element not to have any hover on-click event or style due to it just being part of instructions regarding the other buttons that looked like it on the page, and to give it override precedence. Which was this:

This removed all styling and bound JavaScript/JQuery functionality on the single element for me, while not affecting the others on the page :). For more info see the mozilla reference.

To disable the hover effect, I’ve got two suggestions:

• if your hover effect is triggered by JavaScript, just use $.unbind(‘hover’);
• if your hover style is triggered by class, then just use $.removeClass(‘hoverCssClass’);

Using CSS !important to override CSS will make your CSS very unclean thus that method is not recommended. You can always duplicate a CSS style with different class name to keep the same styling.

tbh, using 2 different languages is even worse then using 1 with !importend. With a bit of practice there are many ways you can write CSS without using to much of the !importend property.

From your question all I can understand is that you already have some hover effect on your button which you want remove. For that either remove that css which causes the hover effect or override it.

For example if your button’s background color changes on hover from red to blue. In the overriding css you will make it as red so that it doesnt change.

Also go through all the rules of writing and overriding css. Get familiar with what css will have what priority.

Add the following to add hover effect on disabled button:

Do this Html and the CSS is in the head tag. Just make a new class and in the css use this code snippet:

pointer-events:none;   .buttonDisabled   

Use transition: all 100s ease-in-out; to override the hover change. This is not a solution but a workaround if you do not know the original value of the property which you want to replace.

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don’t require clarification from the asker. — From Review

Other solutions didn’t work for me.

.home_page_category_links, .home_page_category_links:hover

That means the same styles that are applied to elements of that class are also applied to elements of that class when hovered.

Extra note: If you’re keeping the colour the same, perhaps you may also want to avoid any underline, if so, just include text-decoration: none; as well (or text-decoration: none !important; if using bootstrap).

doing this for text is fine, but what would be the case for images, In my case I display a brightened version of the image on hover and I display darkened version of the image when not hovered, I knew this is not the best solution I tried linear-image as well, but didn’t get the result I want, So my question is, for my mobile screen I don’t want the hover effect so I place the same Image url, but I wonder if the user clicks the image does the browser tries to reload the same url, or will not perform any task.

I tried the following and it works for me better

What I did here is that I make the hover effect on the button but doesn’t apply to the button that has the disabled class

button:hover:not(button.disabled)

Problem which I understood — Well I was doing something the same as yours. I have used four links among which two of them will hover and the other two will not. Now that I have used the a tag(hyperlink tag in HTML) to use hover, all my hyperlinks start hovering, which I don’t want.

So, I put the two a tags which were not supposed to hover inside the same class, say .drop, and use the class to specify that I want all a tags inside the dropped class not to hover but the other a tags do.

To do so, I just wrote a CSS

what I meant here is that apply a hover to all the tags but not the ones which are inside the .drop class.

@Simone Colnaghi was the first to mention it, and it worked for me too.

Источник

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.

Источник