Do not apply hover effect to a particular child div when the hover effect is already applied to the parent

I am encountering a problem with the hover effect.

I have 3 child div's structured as follows:

<div class="parent">
    <div class="child1">A</div>
    <div class="child2">B</div>
    <div class="child3">C</div>
</div>

I have set up a hover effect on the parent div to change the color of child1 and child2, but the hover effect is also affecting child3.

Is there a way to exclude the hover effect on child3 alone?

Any assistance in resolving this issue would be greatly appreciated. Thank you in advance.

div.parent:hover {
    color: #909090;
}

In the given example, I want to prevent the change of color on the text "C" even though it is located within the parent div.

htmlcss

Answer №1

To enhance your CSS, try increasing the specificity:

.parent:hover .child1, .parent:hover .child2 {
    color:#909090;
}

Answer №2

div.parent:hover {
    color:#909090;
}

When your CSS code specifies to "select DIV tags with the parent class and change the font color to #909090 only on hover state," it is important to understand how to properly target the elements you want.

If you want to apply the hover state to a child element, you need to adjust the CSS like this:

/* Explanation: target child DIV tags within the parent div on hover state */
div.parent div:hover {
    /* Add your CSS styles here */
}

To create specific CSS rules for certain elements while excluding others, you can be more precise by using multiple classes. For instance, you can add additional classes like child1 and child2 for special hover effects while excluding child3:

<div class="parent">
    <div class="child1 myHoverClass"></div>
    <div class="child2 myHoverClass"></div>
    <div class="child3"></div>
</div>

With this structure, you can easily target specific elements with CSS:

/* Explanation: target children DIV tags with the class "myHoverClass" within the parent div and apply styles for hover state only to child1 and child2 */
div.parent div.myHoverClass:hover {
    /* Add your CSS styles here */
}

Remember: be mindful of spaces in CSS selectors, as they are crucial and can change the meaning of your code significantly if not used accurately.

Answer №3

If you want to experiment with different colors, consider using the following style:

.element4
{
    background-color: #FFF;
}

EXAMPLE

Answer №5

div.parent:hover > :not(.child3) {
    background-color:#909090;
}

Answer №6

 div.parent:hover .child1,div.parent:hover .child2{
    background-color: #909090;
}

Answer №7

Try switching up the classes for child1 and child2 to something like this:

<div class="parent">
    <div class="new-class child1"></div>
    <div class="new-class child2"></div>
    <div class="child3"></div>
</div>

.new-class:hover{background-color:red;}

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

Achieve the effect of bringing the div and its contents to the top when hovered over, all while keeping

I have designed a popup that includes multiple boxes. I want the width of the box to expand and be visible over all content on the webpage when a user hovers over any ".deviceboxes". I tried using ".deviceboxes:hover" which worked fine for the first box in ...

jqueryhtmlcss

CSS techniques for aligning content

I am currently working on designing a website template, and I have encountered an issue with positioning three individual columns that contain blocks of content. My objective is to have the first block of content in each column start at the top of their re ...

htmlcsspositioning

What is the best way to ensure that the same information is included on every page of

Currently developing a dynamic website where certain components such as the fixed header, menubar, and footer are common across multiple pages. What is the best way to include these fixed components on every webpage? I am utilizing JSP and JavaScript for ...

javascripthtmlcssjsp

Sending radio button value via AJAX request

Greetings and thank you for taking the time to hear out my query. I am aware that this question has been asked numerous times before (as informed by SO) but my case is slightly unique. I currently have a functional AJAX script that utilizes a dropdown menu ...

javascriptphpjqueryhtmlajax

Designing CSS elements that flow from top to bottom, left to right, and extend to the right when overflowing

I'm attempting to create a layout where divs are displayed from top to bottom, but once they reach the bottom of the browser window, any additional divs will overflow to the right. You can take a look at the desired layout here: https://i.stack.imgur. ...

javascriptcsshtmloverflow

Focus on a primary window

When a new window is opened using the target attribute of _blank, is it possible to target links to open in the original "parent" window? Appreciate your help! ...

javascripthtml

Text-color in the v-tooltip

Is there a way to change the text color of v-tooltips components without affecting the tooltip background color? I attempted to inspect the element, but the tooltip only appears on hover, making it impossible to inspect. Below is the code snippet: < ...

cssvue.jsvuejs2vuetify.jsv-tooltip

Storing user input from Vue.js in a JavaScript array for future use

Utilizing vue.js <template> <input id="email" v-model="email" type="text" placeholder="Email"> <input id="name" v-model="name" type="text" placeholder=" ...

javascripthtmlvue.js

Angular 6 Calendar Template issues with parsing: Unable to link to 'view' as it is not recognized as a valid property of 'div'

I am in the process of developing an application that utilizes this angular calendar. My tech stack includes Angular 6 with AngularFire2 and Firebase. Below is my app.module.ts file: import { BrowserModule } from '@angular/platform-browser'; imp ...

javascripthtmlangulartypescript

TinyMCE's Textarea is blank and not displaying any content

I can't seem to figure out where I went wrong with using TinyMCE. I downloaded it from and chose version 4.0.3. After downloading, I ended up with a folder called tinymce_4.0.3 which contained subfolders like tinymce_4.0.3\tinymce\js\t ...

javascripthtmltinymce

Listen up, Javascript keyboard input recorder

I am aiming for the search bar to pop up when you type. The code below is functioning, but I am facing an issue where the search bar pops up even when typing in a different input field, such as the comment input. Is it feasible for the search bar not to ...

javascriptjqueryhtmlcss

What methods are available to modify, append, or remove an attribute from a tag?

I have an HTML document that contains two different types of 'tr' tags. <tr bgcolor="lightgrey"> <tr> Each 'tr' tag includes 3-4 lines of code with embedded 'tags' within them. However, when I try to access the a ...

pythonhtmlbeautifulsoupattributestags

Making the text gradually disappear at the bottom of a section using a see-through overlay, while ensuring the height remains within the boundaries of the section even

Trying to achieve a sleek fade-out effect at the end of a text section for a 'read more' indicator. I've been studying various tutorials, including this, and my current code is as follows: html <section> <p>Lorem ipsum dol ...

csshtmlfadefadeoutfadein

Trouble with the JQuery event listener onchange()

On my webpage, I've set up a drop-down list and a text-box in the following HTML code: <table> <tr> <td>Group Name: </td> <td><%= Html.Dr ...

jqueryhtmlhtml-helper

Managing Events in PHP

As a .net developer working on a php site for a friend, I've been making good progress. However, I have a question - is there something similar to a textchanged event in php? Here's what I'm trying to achieve: I want to dynamically populate ...

phphtml

How can I utilize jQuery to iterate through every anchor tag on an HTML page?

I am looking to reference all anchor tags on the page that have a parent h2 tag. To achieve this, I need to iterate through each anchor tag that has a parent h2 and add an attribute using jQuery. <body> <h1>not me</h1> <a href ...

javascriptjqueryhtmlcss

What is the method for changing the icon color to dark in Twitter Bootstrap?

I am facing an issue where the icon in my menu tab turns white when active, making it difficult to see. Is there a way to change the color of the icon to black? I have found a class icon-white to make it white, but there is no corresponding class to make ...

csstwitter-bootstrapicons

Insert a new item into an existing list using jQuery

I am looking to enhance user experience by allowing them to easily add multiple sets of inputs with just one click. I have been experimenting with jQuery in order to dynamically insert a new row of input fields after the initial set. My current approach i ...

javascriptjqueryhtml

Equal-height rows and columns using Flexbox

I've been working on a row layout with two columns, each set to 50% width. The left column contains an image, while the right column displays text. Here is my HTML: .row{ display:flex; ...

htmlcssflexbox

The beginning of my HTML input is not at the top of the page

I have a query regarding the custom input line I created recently. When I adjust the height of the input, instead of aligning with the top, the text appears vertically centered. Moreover, the text does not wrap to a new line once it reaches the outermost ...

htmlcss