Hover

No-hover

Add .no-hover to a control to turn off its hover effect. The control keeps its resting border, background, and shadow when the pointer is over it, while focus, selected, disabled, and error states are left untouched.

This is useful when a hover change would be distracting rather than helpful — for example inside an input group, where hovering the field would otherwise highlight it while the user is interacting with an adjacent control.

The class is supported on the following controls:

.no-hover Turns off the hover effect on text inputs, textareas, selects, search fields, input groups, and table header cells. On .table-active tables it also suppresses the pressed/active highlight on the header cell it is applied to.

							

<input type="text" class="form-control no-hover">

Form controls

Demonstrates .no-hover on a text input, textarea, select, search field, and numeric input group. These examples are also used by our Playwright CSS property assertion tests.

Example
HTML

Hover over each control below. The controls on the left react to hover with a changed border and background; the controls on the right carry .no-hover, so they keep their resting appearance.

Default Hovering changes the border and background.

With .no-hover Hovering leaves the resting style unchanged.

Default

With .no-hover

Default

With .no-hover

Default

SEK

With .no-hover

SEK

development/documentation/docs/hover-helper-classes/examples/no-hover.html

<p>Hover over each control below. The controls on the left react to hover with a changed border and background; the controls on the right carry <code>.no-hover</code>, so they keep their resting appearance.</p>

<div class="d-flex flex-wrap gap-24">
	<!-- Default text input — hover effect active -->
	<div class="form-group docs-form-state-width">
		<label for="hoverDefaultInput">Default</label>
		<input type="text" class="form-control" id="hoverDefaultInput" placeholder="Hover over me" aria-describedby="hoverDefaultInputHelp">
		<span id="hoverDefaultInputHelp" class="help-block">Hovering changes the border and background.</span>
	</div>

	<!-- Text input with .no-hover — hover effect suppressed -->
	<div class="form-group docs-form-state-width">
		<label for="hoverNoneInput">With <code>.no-hover</code></label>
		<input type="text" class="form-control no-hover" id="hoverNoneInput" placeholder="Hover over me" aria-describedby="hoverNoneInputHelp">
		<span id="hoverNoneInputHelp" class="help-block">Hovering leaves the resting style unchanged.</span>
	</div>
</div>

<div class="d-flex flex-wrap gap-24 mt-24">
	<!-- Default textarea — hover effect active -->
	<div class="form-group docs-form-state-width">
		<label for="hoverDefaultTextarea">Default</label>
		<textarea class="form-control" id="hoverDefaultTextarea" rows="2" placeholder="Hover over me"></textarea>
	</div>

	<!-- Textarea with .no-hover — hover effect suppressed -->
	<div class="form-group docs-form-state-width">
		<label for="hoverNoneTextarea">With <code>.no-hover</code></label>
		<textarea class="form-control no-hover" id="hoverNoneTextarea" rows="2" placeholder="Hover over me"></textarea>
	</div>
</div>

<div class="d-flex flex-wrap gap-24 mt-24">
	<!-- Default select — hover effect active -->
	<div class="form-group docs-form-state-width">
		<label for="hoverDefaultSelect">Default</label>
		<select class="form-control" id="hoverDefaultSelect">
			<option>Option 1</option>
			<option>Option 2</option>
			<option>Option 3</option>
		</select>
	</div>

	<!-- Select with .no-hover — hover effect suppressed -->
	<div class="form-group docs-form-state-width">
		<label for="hoverNoneSelect">With <code>.no-hover</code></label>
		<select class="form-control no-hover" id="hoverNoneSelect">
			<option>Option 1</option>
			<option>Option 2</option>
			<option>Option 3</option>
		</select>
	</div>
</div>

<div class="d-flex flex-wrap gap-24 mt-24">
	<!-- Default search field — hover effect active -->
	<div class="form-group search-group docs-form-state-width">
		<label class="sr-only" for="hoverDefaultSearch">Search</label>
		<input type="search" class="form-control" id="hoverDefaultSearch" placeholder="Hover over me">
		<span aria-hidden="true" class="search-icon">Search icon</span>
	</div>

	<!-- Search field with .no-hover — hover effect suppressed -->
	<div class="form-group search-group docs-form-state-width">
		<label class="sr-only" for="hoverNoneSearch">Search</label>
		<input type="search" class="form-control no-hover" id="hoverNoneSearch" placeholder="Hover over me">
		<span aria-hidden="true" class="search-icon">Search icon</span>
	</div>
</div>

<div class="d-flex flex-wrap gap-24 mt-24">
	<!-- Default numeric input group — hover effect active -->
	<div class="form-group docs-form-state-width">
		<label for="hoverDefaultGroupInput">Default</label>
		<div class="input-group" id="hoverDefaultGroup">
			<input type="number" class="form-control" id="hoverDefaultGroupInput" value="500" aria-describedby="hoverDefaultGroupCurrency">
			<span class="input-group-text" id="hoverDefaultGroupCurrency" aria-label="Currency: SEK">SEK</span>
		</div>
	</div>

	<!-- Numeric input group with .no-hover — hover effect suppressed -->
	<div class="form-group docs-form-state-width">
		<label for="hoverNoneGroupInput">With <code>.no-hover</code></label>
		<div class="input-group no-hover" id="hoverNoneGroup">
			<input type="number" class="form-control" id="hoverNoneGroupInput" value="500" aria-describedby="hoverNoneGroupCurrency">
			<span class="input-group-text" id="hoverNoneGroupCurrency" aria-label="Currency: SEK">SEK</span>
		</div>
	</div>
</div>