Using CSS :hover for elements with dual classes only

Is there a way to make the CSS :hover selector work only when two different classes are attached to a div? I have tried a couple of methods, but they eliminate the hover effect. For example:

.accordionButton .cyan:hover{
    color: cyan;    
}

I cannot simply combine them like this:

.accordionButton:hover, .cyan:hover{
    color: cyan;    
}

This approach will not work for me as I have additional colors that I need to apply in a similar manner.

In essence, I am looking for a way to apply CSS styles only when hovering over a div that has both the classes .accordionButton and .cyan simultaneously. Is there a solution to achieve this?

csshover

Answer №1

By combining class selectors without spaces, you can apply specific styles to elements with multiple classes simultaneously.
In the following example, the :hover effect is only triggered on elements that have both the accordionButton and cyan classes:

.accordionButton.cyan:hover {
  color: cyan;
}
<div class="accordionButton">Only Button</div>
<div class="cyan">Only Cyan</div>
<div class="accordionButton cyan">Both Classes</div>

If you need further clarification, check out MDN's explanation:
Target an element if it has more than one class applied.

To target elements with specific combinations of classes, include all desired classes in the selector without any space between them.

This ensures that the browser selects elements only when all specified classes are present.

Answer №2

When using a selector, it's important to consider the spacing between classes. By including a space, as you did, all elements with class cyan that are descendants of elements with class accordionButton will be selected. To target the same element, simply remove the space.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The issue of flickering during the combination of slideToggle and animate in jQuery

I want to incorporate a hidden div that, when triggered by a button click, will smoothly reveal itself and "push" away part of another div without changing the overall size of the containing div. However, I have encountered an issue where the div below th ...

javascriptjqueryhtmlcss

Placing a button above another element using CSS styled components

I'm attempting to make a button overlap and be positioned in a specific location on top of a search bar. The current appearance is not what I desire, as the button seems to shift back to its original position when adding a :hover element after applyin ...

cssreactjsjsxcss-positionstyled-components

The utilization of the <span> tag featuring a {float:right] property causes container expansion in Internet Explorer 7

Within my HTML code, I have an A tag button that contains a Span element to hold icons. This setup functions correctly in most browsers, except for IE7. When I attempt to float the Span to the right side using CSS, it causes issues specifically in IE7, cau ...

htmlcsscss-float

Creating a Delicious Earth Progress Pie

I'm looking to incorporate a unique progress bar design on my website, similar to this one: The progress pie Can anyone guide me on how to create a progress pie with an image inside it that changes color as it moves? ...

javascripthtmlcssanimationprogress-bar

Is it feasible to have content wrap around a Grid-Item?

I've been experimenting with the new CSS Grids layout module to arrange my content. I have a set of paragraphs that are 8 columns wide, and I'm looking to insert a figure that spans 3 columns in columns 1-3. After that, I want the following parag ...

htmlcsscss-grid

Using CSS properties as false values within React applications

Can you provide guidance on using conditional styles with conditional operators? What would be the ideal code example? Is it possible to use non-CSS values? margin: isOpen ? '10px' : undefined margin: isOpen ? '10px' : 'initial&a ...

javascriptcssreactjsstyled-componentscss-in-js

Having Difficulty Applying a Background Color to a Class in Bulk

I am working on a unique HTML canvas for pixel art, which is created using a table made up of various divs all sharing the "pixel" class. I want to add a clear button that can reset the entire canvas, but changing the background color of each individual di ...

javascriptcssclassbackground-color

What is the best way to have three divs displayed in a row - either all inline or all block, without having two displayed inline and one displayed

I am facing an issue with a set of three inline divs that need to be displayed either in a row or in a column if they do not fit within their container width. In cases where the container is too narrow for them to fit in one row, but not narrow enough to c ...

htmlcss

Can someone assist me with positioning an HTML child element to appear behind a parent element using CSS?

I need help displaying an HTML element behind a fixed header in my webpage. I want the div element (which is a child of the header) to appear beneath the header like a dropdown menu. However, I've tried adjusting the z-index and position properties wi ...

htmlcss

Overlaying div above vimeo player

I'm attempting to overlay a div on top of a Vimeo video, a task I anticipated would be straightforward but turns out to be more complex than expected. Below is the HTML code snippet: <div id="wrap"> <iframe id="video" s ...

htmlcssflashvideo

Adjust CardMedia Images to match their content in the new MUI 5 version

I’m looking to have my images fully fill the CardMedia component. However, because they are of varying sizes, some end up being cropped like this: https://i.stack.imgur.com/JHIrT.png Additionally, when resizing the images, some get cut off as well: ht ...

javascripthtmlcssreactjsmaterial-ui

Learn how to create a responsive flickr embedded video with Bootstrap!

I'm struggling to make the embedded video responsive. I attempted the solution mentioned in a Stack Overflow post but it didn't work for me. The video's width remains the same and doesn't scale down properly, appearing out of bounds on ...

htmlcsstwitter-bootstrapvideoflickr

The alignment of Material-UI Typography in AppBar appears to be off

Having trouble centering text in an AppBar? You're not alone. Despite trying various methods like using Typography element, align="center", textAlign="center", and style={{ align: "center" }}, among others: class CustomApp extends React.Component { ...

cssreactjsmaterial-ui

Adjustable width columns in Flexbox design

I need assistance with creating a responsive three-column grid layout using Flex in CSS. I have achieved a fairly responsive design by following the CSS provided in the fiddle link below. However, I am facing an issue where the second column (the blue one) ...

htmlcssflexbox

Ways to eliminate or conceal solely the play/pause symbol or button from the media player within the video tag

[Please see the screenshot attached, I am looking to remove the play/pause icon that is highlighted] [screenshot] How can I hide or remove only the play/pause button from the media player of a video tag? When I dynamically add the controls attribute using ...

javascriptjqueryhtmlcss

Is it possible to dynamically change the background image using ReactJS?

I attempted to dynamically change the background image style for the div below: Below is my code snippet for implementation: render: function() { var divImage = { backgroundImage : "url(" + this.state.song.imgSrc + "),url(" + this.state.nextImgSrc ...

cssreactjs

Learn the trick to making specific words appear bold in Select2 by changing the font style

I'm currently working with select2 version 4.0.1, and I have a requirement to modify the font for specific words. In particular, I want to display codes AK and HI in a different/bolder font style, similar to the example below: <select id="select2" ...

jquerycsshtmljquery-select2

Creating a soft focus effect in a specific region (behind the text)

While working on my homepage created with HTML/CSS/Javascript, I have text positioned at the top left corner of the screen. The challenge arises from the fact that I am using different backgrounds sourced from Reddit, and a script randomly selects one duri ...

javascripthtmlcssweb

Placing text beside an image

I am brand new to osCommerce and recently took over this code. We are looking to improve the layout of the new_products page. Here is the current display code: div class="contentText"> <div class="NewProductsList"> <table border="0 ...

phphtmlcss

Guide on aligning a division within another division?

Included below is my HTML code: <div id="background_div"> <img id="background_img" src="images/background.jpg" alt="dont matter"> <i class="material-icons">perm_identity</i> <div id="dropdown"> <ul id=" ...

htmlcss