How can I change the background color of the .arrow-tip class when hovering over the first <li>? Can you provide me with the correct CSS rule?
Here is the HTML code:
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</nav>
<div class="arrow-tip">A triangle tip for the nav menu</div>
And here is the CSS code:
nav > ul > li:nth-child(1):hover ~ .arrow-tip {
background-color: #FF0;
}
I am seeking a solution that uses PURE CSS. Can you help with this?
Unfortunately, achieving this with CSS is not currently possible. You can read more about it here.
However, you could explore an alternative approach by checking out this JsFiddle demo.
ul {
list-style: none;
padding: 0;
width: 45px;
text-align: center;
position: relative;
}
li {
background: silver;
margin: 0 0 5px;
}
li:after {
content:"\25be";
font-size: 2em;
position: absolute;
left: 10px;
top: 35px;
}
li:hover:after {
z-index: 1;
}
li:nth-child(1):hover:after {
color: red;
}
li:nth-child(2):hover:after {
color: blue;
}<ul>
<li>A</li>
<li>B</li>
</ul>Edit: For the desired outcome, you may want to refer to this updated JsFiddle demo.
If interested, please review the instructions provided in the comments above.
.menu {
list-style: none;
padding: 0;
}
.menu > li {
position: relative;
background: fuchsia;
width: 100px;
height: 20px;
display: inline-block;
vertical-align: top;
}
.submenu {
position: absolute;
top: 0;
left: 0;
width: 100%;
list-style: none;
padding: 30px 0 0;
margin: 0;
}
.submenu > li {
background: fuchsia;
display: block;
}
.submenu > li:before {
content: "";
position: absolute;
top: 20px;
left: 50%;
margin-left: -10px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid aqua;
z-index: -1;
}
/* hide */
.submenu {
display: none;
}
/* hover */
.menu > li:hover {
background: aqua;
}
.menu > li:hover > ul {
display: block;
}
.submenu > li:hover {
background: aqua;
}
.submenu li:not(:nth-child(1)):hover:before {
border-bottom: 10px solid fuchsia;
z-index: 0;
}<ul class="menu">
<li>one
<ul class="submenu">
<li>a</li>
<li>b</li>
<li>x</li>
<li>y</li>
<li>z</li>
</ul>
</li>
<li>two
<ul class="submenu">
<li>c</li>
<li>d</li>
</ul>
</li>
<li>three
<ul class="submenu">
<li>e</li>
<li>f</li>
</ul>
</li>
<li>four
<ul class="submenu">
<li>g</li>
<li>h</li>
</ul>
</li>
</ul>I am currently facing an issue with my slide show that is composed of divs, each containing a picture and some html controls. The problem arises when clicking on a control in a slide other than the first one - it only updates the first slide. The only thin ...
I am a beginner in using python flask and understanding the MVC concept. My goal is to display the selected option in a dropdown list. Below is my list defined in a .py function. @app.route('/', methods=['GET']) def dropdown2(): ...
Is there a way to apply a style to the parent element when an input is in focus? input:focus { background-color:yellow; } For example, if we have the following HTML: <div class="foo"> <input type="text /> Hello </div> I ...
After scrambling my puzzle, I now need it to be rotated. Can anyone help me with this? Thanks :) fillPatternImage:imageObj, x:-pieceWidth*i/2, y:-pieceHeight*j/2, stroke: "#000000", ...
I have designed a landing page with fixed left and right images and content in the middle. It looks fine on desktop view, but on mobile view, the images are overlapping the content. How can I resolve this issue? <div class=" ...
My Sass compiler generated an overly large file for me, but it could be much smaller!! I checked the compiler settings and didn't find anything wrong! The issue might be with the compiler itself. It's also possible that there is a problem with my ...
I need help automating the calculation of the number of days a person worked based on their "in-time" and "out-time". I've tried to implement this in my JS code, but it's not working as expected. HTML <fieldset> In-Time: <input clas ...
Whenever I use the autocomplete fields on my website, I've observed an interesting behavior. When I select multiple options, the height of the input increases significantly, causing everything below it to shift downward like this. Is there a way to m ...
I'm facing a challenge with loading a page that needs to display values with dynamic pagination. To retrieve these values, I am making a REST call which returns a JSON object. Although I can see the JSON output in the browser console, I am unable to d ...
I attempted to center a div containing 2 photos perfectly in the center, but encountered some issues. Despite trying various positioning techniques such as display: flex, align-items, justify-content, and more, I couldn't get the image container to mo ...
I am looking for assistance with a signature capture form. I came across a standard template on Github that works perfectly, but I wanted to customize it further. However, my Javascript skills are still in the early stages. The current code allows you to c ...
Recently, I experimented with react-waypoint to control the visibility of a div. The code works as intended by hiding the div when it reaches the waypoint inside onEnter. When the div is inside, the isInView state becomes true, which in turn triggers the d ...
I'm a beginner in web development and I have some basic knowledge: HTML - structure of websites CSS - design aspect JavaScript - for adding interactivity Now, what exactly is jQuery, AngularJS, and Node.js? Upon researching, I discovered that jQue ...
I've successfully completed a basic CRUD application, but now I need to incorporate a Search Bar that can filter my table and display rows with matching letters. I'm unsure how to approach this in my component. I've seen examples using pipe ...
I'm currently working on a project using node.js where I need to take input from a text box in an HTML file and store it in an array. However, I'm struggling with how to achieve this. My ultimate aim is to create a chat application, and I believe ...
models.py The Order model in models.py defines various fields such as user, customer, card_id, mobile, email, total_price, payment_method, status, take_method, points_earned, date, and address. It also includes preset choices for payment options, order sta ...
This is a unique question that is not related to the issue of querySelectorAll detecting value in input. Instead of asking whether an input field has a value, I am interested in how to detect if the current visible div contains an input field. This is a n ...
working environment ・next.js ・reacｔ ・typescript https://www.youtube.com/watch?v=ujlpzTyJp-M A Toolchip was developed based on the referenced video. However, the --scale: 1; property is not being applied. import React, { FunctionComponent ...
Check out my demonstration here: http://jsfiddle.net/x01heLm2/ I am trying to achieve two goals with this code. Goal number one is to have the mini thumbnail still appear when hovering over the .box element. However, I do not want the hover event to be tr ...
I am trying to implement conditions on CSS properties in JavaScript. What is the most efficient approach to achieve this? <html> <head> <title>TOOLTIP USING JAVASCRIPT</title> <style> span{ curso ...