Ensuring that the CSS aligns correctly with the HTML structure is essential in order to enable the hover

I am looking to have an image appear when a mouse hovers over ONLY the "name" of the food item, and not the "price" which is part of div.child.

<div class="menu-block">    
<div class ="menu-titles"><span><p class="title">Brunch</p></span></div>

<div class="meal_unit"> 
      <div class="child">
        <span class="name"> <p>Food</p></span>
        <span class="price"><p>$20.00</p></span>
        <img id="img1" class="food" visible src="food.jpg" alt="food"/>
      </div>

I have successfully displayed the image in the div.child, but I need it to only appear when the mouse hovers over the name and not the price. How can I achieve this? Any suggestions would be appreciated. Thank you.

.food-pictures {
display:none;}

/* This code works but I want it to be specific to the dish: */
.child:hover img {
display: block;}

/*I tried the code below, but it didn't work. What am I missing in the correct path or approach?*/
.dish:hover img{
 display:block}

Answer №1

<div class="menu-section">
  <div class="menu-categories"><span><p class="category-title">Lunch</p></span></div>

  <div class="meal_selection">
    <div class="item">
      <span class="food-name"> <p>Sandwich</p></span>
      <img id="img2" class="food-image" visible src="https://example.com/sandwich.jpg" alt="sandwich" />
    </div>
    <div class="item-details">
      <span class="price"><p>$9.99</p></span>
    </div>

I have relocated the price element outside of the item class as per your request.

Check out my demo on Fiddle: https://jsfiddle.net/exampleuser/abc123/

Feel free to share your own Fiddle demo for comparison.

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

An unusual CSS phenomenon with z-index

I've encountered a peculiar issue with my z-indexing. I have an image positioned relatively with a z-index of 1, and it should be above my navigation that is positioned absolutely with a z-index of -1. The problem is that upon page load, the image ap ...

Determining the decimal width of an element using jQuery

I've been searching everywhere for a method to accurately determine the width of an element without rounding. The reason behind this is that I have multiple elements floated to the left with display inline-block and I am attempting to automatically ad ...

Issue with Bootstrap 4 Multi Select Functionality in Modal Not Functioning

Having trouble getting a bootstrap multi-select dropdown to work inside a Bootstrap modal. When the modal opens, the following CSS is affecting the dropdown: select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.selectpicker { ...

Inspecting JavaScript for any attachments

Before hitting the submit button, I need to verify if a file has been uploaded and display a warning message prompting the user to attach a file if it hasn't been done yet. I am looking for guidance on how to achieve this using JavaScript, Prototype, ...

Creating Custom GTK Themes using CSS3

Just a quick question: Can CSS3 be used to style GTK3 applications? ...

There seems to be an issue with XAMPP as I am unable to start my server due to an

A problem has occurred: Apache shut down unexpectedly. 11:58:07 [Apache] This could be caused by a blocked port, missing dependencies, 11:58:07 [Apache] insufficient privileges, a system crash, or another shutdown method. 11:58:07 [Apache] Click on ...

Is there a way to store a jQuery CSS manipulation within a cookie?

On my Wordpress site, I have a code that allows users to change the font size of the body when they click on one of three generated buttons: <button class='body_standard_font_size'>Standard</button> <button class='body_medium ...

Restricting CSS Background Image Width to 960 Pixels

My CSS style is causing my background image to span across the whole screen instead of repeating within the 960px width of the body. body { width:960px; margin: 10px auto 10px auto; background-image:url(logo.png),url(backgroundimage.jpg); ...

What's the secret behind the functionality of this jQuery menu?

As I was browsing the website , I noticed that they have a menu in the top header with links like "Freebies" and "Inspiration". I searched for where the code for this menu is located, but couldn't find it. Can anyone help me locate the code? I' ...

Creating a unique carousel design using only CSS in Bootstrap

Trying to create a CSS effect to enhance Bootstrap, I noticed that it only works correctly when clicking the right arrow. Whenever I click the left one, nothing happens. I'm not sure where I made a mistake, can anyone help me spot it? Thanks in advanc ...

Using a series of identical divs to dynamically update the image URL

Greetings! I am a newcomer to the world of web development and I have decided to hone my skills by creating a small website for my mother! My goal is to replicate a specific div multiple times while changing only the image URL and the heading caption. < ...

Combine all the HTML, JavaScript, and CSS files into a single index.html file

So here's the situation - I am utilizing a C# console application to convert four XML files into an HTML document. This particular document will be circulated among a specific group of individuals and is not intended to be hosted or used as a web app; ...

Having trouble loading Yeoman Webapp SASS

Every time I try to build a web application using 'yo webapp', I encounter a 404 Error. GET http://localhost:9000/styles/main.css 404 (Not Found) I removed compass from the project, but that shouldn't be causing the issue, correct? ...

I am curious if there is a wysiwyg web editor extension specifically designed for VS2010 available?

In my experience, I have been working with C#, HTML coding using VS2010 and MVC. Utilizing VS2010 has proven to be an invaluable tool for me in this process. Currently, I find myself needing to create some straightforward static web pages. I am wondering ...

Experience the latest HTML5 features directly within a Java desktop GUI, with seamless communication through

This Java desktop GUI utilizes a Java-based web services communication layer along with an HTML library to provide powerful charting and interactivity. I am looking to integrate an HTML5 view within the Java GUI. Can someone assist me in managing JavaScri ...

Create a recursive CSS style for an angular template and its container

I am struggling with styling CSS inside an ng-container that is used in a tree recursive call to display a tree hierarchy. <ul> <ng-template #recursiveList let-list> <li *ngFor="let item of list" [selected]="isSelected"> <sp ...

Avoid creating additional empty lines in a file when writing text with PHP

Encountering a minor issue with a foreach() loop and saving an array to a text file. The desired format is achieved in the file, but there is an extra empty line added at the end of the output. Snippet of the code: foreach($data_arr as $data => $input) ...

Using PHP to display dynamic data and add it to an HTML element

I have a unique situation where I am storing html elements, specifically <rect> svg elements, as strings in a database. In my PHP code, I retrieve and echo this data: $db = getConnection(); $statement = $db->prepare('SELECT `copy` FROM `dra ...

Adjusting the width of a Material UI select/dropdown component

In my material-ui grid setup, each <Grid> contains a <Paper> element to define the grid's boundaries precisely. Inside every <Paper>, there is a custom <DropDown> component (a modified version of Material-UI's Select). I ...

When using CSS3 flex, the input box has a specified width but is still overflowing

Can anyone provide some insight into the behavior of this particular jsFiddle? http://jsfiddle.net/zZgmn/1/ I am attempting to set a specific width for an input[type=text] box. However, when the flex-direction is set to row, the input box refuses to adjus ...