I have a list of names:
<div>Timothy Gruns</div>
<div>Lawrence Fishly</div>
<div>Jackson Crolya</div>
What I want is for the background color to change to blue when any name is hovered over. However, if no names are being hovered, I would like the first name in the list to be displayed with a blue background by default. Here's how it should look initially:
If the third name was selected and hovered over, the layout should appear as follows:
If you group all three divs within a parent container, you can utilize the :first-child and :hover selectors to accomplish this styling:
div.container > div {
border: 1px solid black;
margin: 5px;
padding: 5px;
}
div.container > div:first-child {
background: blue;
}
div.container:hover > div {
background: white;
}
div.container > div:hover {
background: red;
}<div class="container">
<div>Timothy Gruns</div>
<div>Lawrence Fishly</div>
<div>Jackson Crolya</div>
</div>Feel free to customize the colors to your preference - the provided colors are just examples.
If you want to achieve a similar outcome, one approach is to reverse the order of names (making the 'first' one the last sibling tag) and present the result as desired using display: flex;:
.parent {
display: flex;
flex-direction: column-reverse;
}
.child {
display: block;
width: 200px;
}
.child:last-of-type {
background-color: #72d5f1;
}
.child:hover ~ .child {
background-color: inherit;
}
.child:hover {
background-color: #72d5f1;
}<div class="parent">
<div class="child">Jackson Crolya</div>
<div class="child">Lawrence Fishly</div>
<div class="child">Timothy Gruns</div>
</div>I'm having trouble implementing a transition delay in my CSS. I've tried adding it in various places but it doesn't seem to be working as expected. This is my CSS: .imageBox { position: relative; float: left; transition ...
Utilizing flexbox, I have successfully designed a 2 column layout with a div at the top spanning both columns for a menu format. While this works flawlessly in Chrome and iOS7, it appears to be ineffective in outdated versions of Safari. In this fiddle, yo ...
I need to assign a variable to the value of the border-color property of my div errorChartColorError = $('.col__item.error').css('border-color'); Although this code works fine in Chrome, Internet Explorer 11 returns it as undefined W ...
In my Angular application, the main navigation consists of a standard toolbar positioned at the top of the page. My goal is to have this navigation bar smoothly scroll up with the user as they scroll down, and then reappear when they scroll back up. I at ...
I am currently working with Angular7 and Bootstrap4. I am attempting to integrate a navbar into my application, but I am facing an issue where the toggle button does not work when the navbar is collapsed. It is important for me to mention that I do not wa ...
<FormControl> <Select labelId="unique-label" id="unique-id" value={1} className={styles.uniqueCustomSelectRoot} IconComponent={() => <MyUniqueIcon />} sx={{ " ...
Hello there, I've been attempting to create a simple animation using CSS and a sprite but for some reason it's not working. Can anyone help me figure out what I'm missing? I have created a sample on JS Fiddle. Could someone please explain w ...
Attempting to create a unique column layout for different device sizes. For medium (md) and larger devices, 2 columns are used: md-8 and md-4. However, on smaller devices, the intention is to display half of the content in the md-8 column, followed by half ...
Currently, I am utilizing MUI makeStyles() to create a series of CSS classes. Within these classes, I am dynamically including and excluding one specific class to my Box element during file drag-and-drop events. The class is successfully added, as I can o ...
Can anyone explain why there is an extra line being produced here? I came across another question where it was mentioned that this issue is not due to CSS but rather caused by HTML. Why is that? This is completely new to me, and I'm curious as to wh ...
I am currently attempting to modify the background color of the entire header in antdesign. I believe the file containing the default settings can be found here: https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less Upo ...
I’m having trouble figuring out what I’m doing wrong. I’ve added custom files and tried to override the existing ones. application.css.scss @import 'bootstrap-sprockets'; @import 'bootstrap'; /* * This manifest file will be co ...
During an Ajax request, blockUI adds a style to the blocks of the checkout form and cart with "background: '#fff'". However, my entire website theme is black and I do not want the background color of the blocks to be white. Is there a way to remo ...
After configuring the CSS for this site using CodeIgnitor, I placed it in the specified location: {link rel="stylesheet" type="text/css" href="<? echo base_url();?>application/assets/css/public.css" /> Although Firebug confirms that the link is ...
Is there a way to disable the scrollbars on a TextArea element? I managed to remove the horizontal scrollbar by using: TextArea.setWrapText(true); However, I am struggling to disable the vertical scrollbar - all I can do is hide it. My goal is to hav ...
Is there a way to modify the style of checkboxes in filtering? For instance, if I wish to adjust the dimensions of the checkbox that appears for the Birth Place field, what steps should I take? https://i.stack.imgur.com/pZLqQ.png ...
I am seeking to determine the precise positions of a div based on its class name. In the screenshot provided, my script for finding the div's position is highlighted in yellow, while the div I am targeting is highlighted in red at the bottom. Currentl ...
Attempting to craft a custom HTML tag using JavaScript, I aimed to create the custom element with ES6 JavaScript syntax. The code devised for this task reads as follows: customElements.define('neo-element', NeoElement); function NeoElement (){ ...
When working with Sass, I have the following code: asdf{ &-b&-c {font-size: 16px;} } And I want the generated CSS to look like this: asdf.asdf-b.asdf-c{ font-size: 16px; } Is it possible to achieve this in Sass without having to repeat th ...
I'm currently experimenting with creating a vertical text-align: justify effect between divs. I am working with a structure that includes 4 div elements inside a td, like this: <td> <div></div> <div></div> <div ...