Remova o comportamento CSS ': hover' do elemento

Eu tenho CSS que muda a formatação quando você passa o mouse sobre um elemento.

HTML:

<div class="test"> blah </div>

CSS:

.test:hover {  border: 1px solid red; }

Em alguns casos, não quero aplicar CSS ao passar o mouse. Uma maneira seria apenas remover a classe CSS da div usando jQuery, mas isso quebraria outras coisas, pois eu também usava essa classe para formatar seus elementos filhos.

Então isso me levou a questionar: Existe uma maneira de remover o estilo 'hover' do CSS de um elemento?

Eu usaria duas classes. Mantenha sua classe de teste e adicione uma segunda classe chamada testhover, que você adiciona apenas àquelas que deseja passar o mouse - ao lado da classe de teste. Isso não é diretamente o que você pediu, mas sem mais contexto, parece a melhor solução e é possivelmente a maneira mais limpa e simples de fazê-lo.

Exemplo:

.test {  border: 0px; }
.testhover:hover {  border: 1px solid red; }

<div class="test"> blah </div>
<div class="test"> blah </div>
<div class="test testhover"> blah </div>

Um método para fazer isso é adicionar:

pointer-events:none;

para o elemento no qual você deseja desativar o foco.

(nota: isso também desabilita os eventos javascript nesse elemento também, os eventos de clique realmente caem para o elemento por trás).

Suporte ao navegador (97,04% em 22 de agosto de2019)

Isso parece ser muito mais limpo

/**
* This allows you to disable hover events for any elements
*/
.disabled {
  pointer-events: none;  /**<-----------*/
  opacity: 0.2;
}

.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 {
  background:green;  
}

<div class="button button-red">Im a red button hover over me</div>

<br/>

<div class="button button-green">Im a green button hover over me</div>

<br/>

<div class="button button-red disabled">Im a disabled red button</div>

<br/>

<div class="button button-green disabled">Im a disabled green button</div>

Use a :notpseudo-classe para excluir as classes às quais você não deseja que o cursor se aplique:

FIDDLE

<div class="test"> blah </div>
<div class="test"> blah </div>
<div class="test nohover"> blah </div>

.test:not(.nohover):hover {  
    border: 1px solid red; 
}

Isso faz o que você quer em uma regra css!

adicione uma nova classe .css:

#test.nohover:hover { border: 0 }

e

<div id="test" class="nohover">blah</div>

A regra css mais "específica" vence, portanto, esta versão border: 0 substituirá a genérica especificada em outro lugar.

Eu também tive esse problema, minha solução foi ter um elemento acima do elemento no qual eu não quero um efeito de foco instantâneo:

.no-hover {
  position: relative;
  opacity: 0.65 !important;
  display: inline-block;
}

.no-hover::before {
  content: '';
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 60;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<button class="btn btn-primary">hover</button>
<span class="no-hover">
  <button class="btn btn-primary ">no hover</button>
</span>

Você deseja manter o seletor, para adicioná-lo / removê-lo não funcionará. Em vez de escrever seletores CSS rígidos e rápidos (ou dois), talvez você possa usar o seletor original para aplicar a nova regra CSS a esse elemento com base em algum critério:

$(".test").hover(
  if(some evaluation) {
    $(this).css('border':0);
  }
);