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:
https://i.sstatic.net/kKy3r.png
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>As a newcomer to jQuery, I've never experimented with lightboxes before. However, I was tasked with creating something fun for April Fools' Day at work. Naively, I accepted the challenge thinking it would be simple, but now I find myself struggli ...
Here is the current code that I am working with: <div class="square"> <div id="wrapper"> <h2>Text</h2> <h3>Text</h3> </div> </div> .square { padding: 10px; width: 150px; height ...
I'm trying to close a modal upon ajax success, but I'm encountering an issue. Here is my code snippet: Javascript success: function() { console.log("delete success"); $('#deleteContactModal').modal('hide'); $( "# ...
Utilizing Bootstrap3 for my responsive page design. In the banner content, I am including a box with text inside: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <s ...
I have been working on a JQuery script that only allows users to input numbers in a text field. However, I am now trying to modify the code to also allow users to enter "-" (hyphen), but so far it's not working as expected. If anyone can provide assis ...
When developing with Symfony + Webpack Encore, I aim to split styles into "layout" and "page-based" categories for convenience. However, despite this organization, I still prefer to compile all styles into a single CSS file. To achieve this, I structure my ...
Let me do my best to articulate the issue. This inquiry pertains to selenium in Python. Take a look at this example: for row in driver.find_elements(By.CSS_SELECTOR, "div[style='overflow: hidden;'] > div > div:nth-child(3)"): ...
On my website, I have implemented WP nav menu and it seems to be functioning correctly. However, I am facing an issue with the sub link under the home link. The screenshot shows the problem clearly. In the provided image, the "support our work" sub link a ...
After successfully setting up bootstrap and its dependencies, I'm struggling to figure out the correct way to include it in my index.html file. I attempted using require("bootstrap"), however, nothing appears to be loading. Any guidance on ...
I'm experiencing an issue with the carousel slider on my website. It seems to only be working in Chrome and not in Mozilla Firefox. You can view the live site at: Below is the code I have used for the carousel: <header id="myCarousel" class="car ...
Hello everyone! I am new to coding and I have a question for the Stack Overflow community. I am trying to customize the color of my Font Awesome icons on the homepage of my WordPress theme (Arcade Pro) using the custom CSS editor. Can anyone provide me w ...
While experimenting with firebug on Facebook's stream, I stumbled upon an interesting discovery regarding the style of the "update options" menu. It appears that they are hiding this menu by using margin-left: -9999px, and displaying it by overriding ...
Here is some SCSS code I am working with: .a { height: 100px; width: 100px; } .b { @extend .a; height: 200px; } After compiling, the CSS appears as follows: .a, .b { height: 100px; width: 100px; } .b { height: 200px; } Whe ...
After utilizing various suggestions, I have successfully created a basic audio slider that starts playing sound (at zero volume) when clicked by the user. They can then adjust the volume as needed. My only challenge is that the volume adjustment only occu ...
I am working with a div structure that looks like this: <div class="row margin-bottom-20"> <div class="col-md-3 service-box-v1" id="div1"> <div><a href="#"><img src="path" id="img1" /></a></div> ...
While incorporating react-beautiful-dnd into my project, I faced an issue where the dragged item is initially positioned incorrectly in one of the lists. There is a brief delay before it jumps to its correct position. You can see the problem in action by ...
angular.element($document[0].querySelector("table > tbody > tr")).mouseover().css("background-color", "red"); <table> <thead> <tr> <th>Name</th> < ...
I am currently working on creating a login form for a school project website. The section that is posing a challenge for me is determining if I can assign a variable to a href or button. For instance, imagine that the href has the variable 'A' ...
I'm currently making adjustments to a Wordpress website that is designed to be responsive. The site uses media queries to adapt its display based on the user's screen size, and everything looks great except for when the screen width is at its sma ...
I am facing an issue with manipulating a dynamically generated directory tree in HTML format using JavaScript. I have a piece of code that generates the tree server-side in ASP.NET and then tries to add a '+' at the end of each list item using jQ ...