Is it possible to change the color of div #panel when hovering over the button #button inside div #left?
#left #button:hover~#panel {
background-color: blue;
}
#panel {
position: absolute;
float: right;
left: 37.5%;
width: 50%;
height: 5px;
background-color: rgb(180, 30, 30);
}<div id="left">
<button id="button">Topics</button>
</div>
<div id="panel"></div>In CSS, it is not currently possible to target the parent of an element directly.
In order to use the :hover selector on one element and style another, both elements must be at the same level in the DOM structure.
The element you want to style with CSS must come before the element you are targeting with :hover.
It seems that you are unable to achieve this unless the element is a sibling, after, or inside the container element.
However, there is a workaround using inline javascript:
#left #button:hover~#panel {
background-color: blue;
}
#panel {
position: absolute;
float: right;
left: 37.5%;
width: 50%;
height: 5px;
background-color: rgb(180, 30, 30);
}<div id="left">
<button id="button" onmouseover="document.getElementById('panel').style.background='blue';"
onmouseleave="document.getElementById('panel').style.background='rgb(180, 30, 30)';">Topics</button>
</div>
<div id="panel"></div>Using pure CSS in your scenario may be a bit challenging because the #panel element is not a direct sibling of the #button.
Here is a simple jQuery script that can achieve the desired effect...
$("#button").hover(
function () {
$("#panel").addClass("hover");
},
function () {
$("#panel").removeClass("hover");
}
);#button:hover {
background-color: blue;
}
#panel {
position: absolute;
float: right;
left: 37.5%;
width: 50%;
height: 5px;
background-color: rgb(180, 30, 30);
}
#panel.hover {
background-color: blue;
}<div id="left">
<button id="button">Topics</button>
</div>
<div id="panel"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>When it comes to CSS, targeting sibling elements is possible only if the #panel html follows immediately after the #button html.
#button:hover {
background-color: blue;
}
#button:hover + #panel {
background-color: blue;
}
#panel {
position: absolute;
float: right;
left: 37.5%;
width: 50%;
height: 5px;
background-color: rgb(180, 30, 30);
}<button id="button">Topics</button>
<div id="panel"></div>If you wish to go back and target the parent of #button (meaning to target #left), you can achieve this using the + selector (#left + #panel) to change the color of panel. Unfortunately, CSS does not support backward traversal, so you will need to use JavaScript or jQuery for this task:
$("document").ready(function() {
$("#button").hover(function() {
$("#panel").css("color", "red");
},
function() {
$("#panel").css("color", "initial");
})
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="left">
<button id="button">Topics</button>
</div>
<div id="panel">Panel</div>I am working on a project where I have three buttons in HTML - orders, products, and supplier. The goal is to display different content based on which button the user clicks: orders, products, or supplier information. function showData(parameter){ i ...
I'm working on a project to create a website that monitors the number of coronavirus cases in my country. The data is organized and stored in a file called cases.json using the following structure: { day: { city: { cases: 1 } ...
After creating a div element with a green background color, I am looking to progressively change the opacity of the color from top (darkest green) to bottom (lightest, white). Is there a CSS-based way to achieve this effect without resorting to using an ...
I am using CSS animation to apply a 'wobble' effect to each letter within a word. The letters are represented by SVG groups <g>. However, in the provided example, the wobbling effect becomes more pronounced with each subsequent letter, wher ...
Upon loading the page, a div animates automatically. There is also a button present. When the button is clicked, I would like to create a new div and animate it the same way as the first one. However, when this happens, the position of the first div also ...
Looking to achieve these effects for <option> and <button> using CSS and JavaScript. Any suggestions on how to do this? ...
I am currently involved in a project where I need to implement enter and exit animations for some components. When a component enters the screen, it should come from the bottom, and when it leaves, it should go upwards. The intended functionality is that w ...
I have a website with the following code snippet: <div class="list_item_normal"> <div class="main_content"> <div class="img_wrap"> <a href="/home/Detaljer/9781118093757"><img alt="Miniaturebillede af omslaget til Op ...
I am facing a frustrating issue with my code. Every time I toggle a checkbox, the parent element's click event also triggers. I have experimented with various solutions like: event.stopImmediatePropagation(); event.stopPropagation(); event.preventD ...
I've been trying to customize the appearance of my calendar panel using extjs. In my EHR application, I have implemented the extjs calendarpanel and datepicker similar to the setup showcased in this link: When a date is selected from the datepicker a ...
Back in the good ole days of basic HTML and CSS, I was able to achieve the following: input:checked+label { background-color: #f00; } <div class="col-xs-6"> <input type="radio" id="template-1" name="template" value="template1" checked> ...
Is there a way to format my FAQ Q & A like an ordered list? <div class="col-left"> <h3><strong>CAPTION</strong></h3> <ul> <li>Q: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspe ...
Can anyone assist me with a strange issue I am facing? Despite using inspect element on my file input and it appearing in the correct place, it does not function as expected. To see for yourself, visit oceankarma.co and click on 'Post' at the top ...
I'm looking for a way to create triangle side navigation tabs similar to this example. I attempted using :after pseudo-element in my CSS: .tabs input + label:after{ content:""; float:left; position:absolute; top:0; right:-12px; width:0; height:0; bor ...
How can I retrieve only the full highlight videos from the JSON object in the video array? { "response": [ { title: "United vd Chelsea", "videos": [ { "title": "Highlights&quo ...
I'm currently working on developing a dynamic video display component for my personal portfolio website. The main concept involves showcasing a mobile application video placed on top of a phone mockup within a designated container. My challenge lies ...
I am facing an issue with two React arrow function components stacked on top of each other using absolute positioning. Both components have onClick attributes, but I want only the one on top to be clickable. Is there a workaround for this? Here is a simpl ...
Whenever I navigate from one textBox to another in my .aspx form, it starts jumping around. The problem is exacerbated when I switch focus to or from a DropDownList. I only have a few textboxes on the form and nothing complex like gridviews or labels. So ...
Looking at this JSON structure {textTemplate:"Name：{0}，Phone：{1}",controls:[{id:1,Name:"Name",type:"text"},{id:2,Name:"Phone",type:"text"}]} I'm unsure how to utilize the directive for converting strings into HTML controls This is what I&apos ...
I've come across several solutions, but none have been able to solve my issue so far. The text fields in question look like this: .form-wrapper .field-list .field .field-element{ background-color: rgba(0,0,0,0.5); color: rgba(255,255 ...