Unable to reach the nested div element within the parent div

I am facing an issue with a <div> nested inside another <div id="redBox">. I want the inner div to have display: inline-block when a user hovers over an img. Here's what I have tried:

img.icnLocation:hover ~ .div_icnStamp.icnLocation {
    display: inline-block; 
}

Strangely, this nested div is not accessible when it's placed within the <div id="redBox">.

You can check out this fiddle for better clarification on the issue. Unfortunately, I need to find a solution using only CSS without jQuery. Any assistance would be greatly appreciated. Thank you!

css

Answer №1

~ refers to the general sibling selector, and even though the second div is not a sibling itself, it is within the same parent as the #redBox div.

To target in CSS, you can use 

img.icnLocation:hover ~ #redBox .div_icnStamp.icnLocation
:

img.icnLocation:hover ~ .div_icnStamp.icnLocation, img.icnLocation:hover ~ #redBox .div_icnStamp.icnLocation {
    display: inline-block;
    background-color:yellow;
    font-weight:bold;
}

View jsFiddle example

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

Adjusting CSS Div Blocks for Different Screen Sizes

I am currently working on designing a page layout that includes two sidebars and a main article area. My goal is to have the sidebars stack vertically beside the main area when viewed on a tablet or phone, with both eventually moving below it. However, I a ...

htmlcss

Conceal Pictures within Sources Section

On my webpage, I have included images with information about my project. To prevent users from downloading the images, I disabled the download option. However, users are still able to access all the images in the Sources tab by inspecting the page. Can a ...

javascripthtmlcss

What causes ngb-tabset to reset to the first tab upon being hidden and then shown again?

I have implemented ngb-tabset within a component that is contained within a single div. This div element is conditionally displayed based on the value of a specific condition. If the condition evaluates to false, another section is shown instead. <div * ...

htmlcssangularng-bootstrap

In CSS and HTML, links located behind a divider are unable to be clicked

I am currently facing an issue with my code where the anchors on the left and right (behind the middle anchor) are not clickable. I have attempted to use z-index to bring only the anchors in front while leaving the divider in the back so that the middle an ...

csshtmlz-indexanchor

Strategies for resolving field errors in Django models file

While working on an ecommerce website, everything was running smoothly until a new app with a different customer model was added. Though it utilized the user model, the app was eventually deleted since it wasn't necessary. However, after deletion, the ...

pythonhtmlcssdjangopostgresql

What is the best way to incorporate a new property into an already existing CSS file

I currently have two CSS files. Below is a sample of a class from one of the CSS files: input[type="submit"], input[type="button"], .butLink { padding: 3px 9px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px ...

css

Guide to personalizing checkbox design using react-bootstrap

I am working with react-bootstrap and attempting to style a custom checkbox, as it appears possible but is not working. I have followed the documentation provided here. Here is the code snippet: import * as React from "react"; import { t as typy } from & ...

cssreactjsreact-bootstrap

Including Previous & Next Buttons in Product Categories

I have set up the display of category products on the home page using the block below: {{block type="catalog/product_list" template="catalog/product/home_short.phtml" category_id="5" column_count="6"}}. I now want to include previous and next buttons to ...

phpjqueryhtmlcssmagento

Dropdown menu similar to the one utilized in Bootstrap

I am curious to understand how the drop-down menu system in Bootstrap3's tutorial page operates. It seems that it collapses all subtopics under a main topic by default, allowing users to either click or scroll to expand further. Additionally, the menu ...

csstwitter-bootstrapdrop-down-menu

Internet Explorer's support for the `<summary>` tag in HTML

Is there a method to enable the summary tag in Internet Explorer 11, such as using an external library? <details> <summary>Here is the summary.</summary> <p>Lorem ipsum dolor sit amet</p> </details> App ...

javascripthtmlcssinternet-explorer

Having trouble with displaying the CSS background image?

I've been attempting to configure background images using CSS, but for some reason, I'm not able to get the images to show up correctly. Below is the CSS code that I'm working with: a.fb { background-image: url('img/Facebook.png&a ...

htmlcss

Creating a notification for specific choices in a dropdown menu

I am working on a form that includes a select element with multiple options. Depending on the option selected, a different form will be displayed. My concern is if a user starts filling out one form and then decides to select another option, I want to add ...

javascriptjqueryhtmlcssforms

Steps for establishing a secure anchor point

Trying to set an anchor point has been a bit challenging. I attempted using: <a href="index-xxx.html#reference-name"> and <a name="reference-name"> The issue is that there is a floating margin on the top, causing the anchor point to go to th ...

htmlcssanchor

What causes the odd gaps at the bottom of boxes in a Pure CSS Masonry layout?

Issue with implementing Pure CSS Masonry layout. Using position: relative for the boxes and position: absolute for the content inside each box is causing gaps below each box. Struggling to find a solution, view the code on this codepen: http://codepen.io/k ...

htmlcss

Ensure portrait orientation images have a restricted width to maintain their aspect ratio

On a responsive site, I have set up flexslider to showcase both landscape and portrait orientation images. The smoothHeight: true option is enabled to adjust the height according to the images. However, at the largest media query where the flexslider cont ...

jquerycssflexslider

What is the best method to keep content confined within a box inside the grid, while also allowing the box to extend beyond the grid boundaries?

Apologies for the confusing title, but I must confess that I am unsure if there are more appropriate terms to explain what I am attempting to achieve. To provide clarity, I have included an image (as they say, a picture is worth a thousand words) https:// ...

csssassbourbon

create a clear backdrop

Creating a question mark icon that reveals helpful tips when hovered over. /*------------------------- Inline help tip --------------------------*/ .help-tip-wrapper{ padding-top: 15px; padding-left: 5px; } .help-tip{ text-align: center; ...

htmlcssbootstrap-4

The fill layout in Next.JS Image isn't working properly

According to the Next.js image component documentation, it states: "When fill, the image will stretch both width and height to the dimensions of the parent element, usually paired with object-fit." However, in reality, the image fills the entire ...

cssreactjsnext.js

How can I make a clickable button or link within an anchor tag that is still able to be right-clicked?

Hey there, I'm currently working on a notification dropdown menu where each <li> contains a link or an <a> tag. I'm aiming to create something similar to Facebook's notification system. However, the challenge lies in trying to ...

javascriptcsstwitter-bootstrap-3drop-down-menuanchor

Handling CSS files on ASP.NET Pages

While ASP.NET can indeed be configured to handle any file type in various ways, most of us have other responsibilities to attend to, even on our days off. I'm currently intrigued by the idea of implementing an ASP.NET handling pipeline specifically fo ...

asp.netcss