display text next to hover image

<img src="" alt="" class="aa">
<img src="" alt="" class="bb">
<img src="" alt="" class="cc">
<img src="" alt="" class="dd">
<div class="a">text</div>
<div class="b">text</div>
<div class="c">text</div>
<div class="d">text</div>

I am looking to activate a click functionality on the individual images and associate each one (aa with a, bb with b, cc with c, dd with d) to display using just CSS.

.a {
display: none;
}
.aa:hover + a {
display: block;
}

Unfortunately, my current implementation is not working as expected and I'm unsure of what could be causing the issue.

Answer №1

Your question doesn't provide clear objectives, but it seems there are mistakes in your code.

  1. The + selector targets the element immediately following the parent. The correct syntax should be as follows:
<img src="" alt="" class="aa">
<div class="a">text</div>
<img src="" alt="" class="bb">
<div class="b">text</div>
  1. The class "a" requires a period before its name, so it should be written like this: .a Here's the corrected code snippet:
.aa:hover + .a {
   display: block;
}

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

jQuery enhanced login panel

Looking to create a unique login box or panel similar to the one featured in this tutorial:Check out the 'subscribe' section at the top right I need a panel like this but with a twist. I want it to open using a slide effect with jQuery or anothe ...

Unable to Upload Image to MySQL Database

I encountered an unidentified index error when trying to upload images. I added a check to prevent the error, but the images are still not being uploaded. I have tested with legitimate images, but nothing seems to work. I've been struggling with this ...

Having trouble with adding data from an array of objects to an HTML element using jQuery's each method

I am currently facing an issue with looping through an array of objects using $.each in jQuery and trying to append the values to an <li>. Here is the relevant jQuery code: $(".sidebar").empty().append("<div>" + "<h5>Student Info</ ...

Incorporate different courses tailored to the specific job role

https://i.stack.imgur.com/iGwxB.jpg I am interested in dynamically applying different classes to elements based on their position within a list. To elaborate: I have a list containing six elements, and the third element in this list is assigned the class ...

Reading custom CSV files in PHP, with separate echoes for specific rows and columns

I have a basic CSV file with 6 columns. EDIT: I'm having trouble finding the error in the code below, specifically with selecting a key and using it as a variable: $handle = fopen('hire_pa_amps.csv',"r"); while($values = fgetcsv($handle)) ...

Is there a way to change the fill color of an SVG circle using Thymeleaf?

I am struggling to change the background color of a circle in an SVG image on my HTML page using Thymeleaf. I attempted to use inline style tags, but it resulted in the circle's background color turning black. <svg id="svg" height="50" width=" ...

Achieve full coverage of a table cell with jQuery by making a div span its entire

Check out this code snippet on jsfiddle: https://jsfiddle.net/55cc077/pvu5cmta/ To address the limitation of css height: 100% only working if the element's parent has an explicitly defined height, this jQuery script adjusts the cell height. Is there ...

Is there a way to set the background image to scroll vertically in a looping pattern?

Is it possible to achieve this using only HTML5 and CSS3, or is JavaScript/jQuery necessary? ...

Utilize jQuery to dynamically swap out a CSS stylesheet in response to changes in the body class

In the head section of my HTML, I have the following stylesheet: <link rel="stylesheet" href="/templates/jooswatch-v3-5/css/bootswatch/superhero/bootstrap.min.css"> I want to replace this stylesheet with different ones based on changes in the body# ...

Is it possible to restrict the movement of the dialog to stay within the boundaries of the window

html: <div id="dialog" title="Past Issues"> </div> Jquery: $( "#dialog" ).dialog({ height: 900, width:1200, modal: true, }); Currently facing an issue where the dialog can be dragged outside of the window are ...

Should validation of the $_GET id be considered essential?

I've been searching for an answer to this question, but I haven't found anything quite like it. How important is it to validate an ID field from the $_GET variable? I currently use is_numeric() to ensure that I receive a number, but is this extr ...

Tips for adjusting image and div sizes dynamically according to the window size

In my quest, the end goal is to craft a simplistic gallery that closely resembles this particular example: EXAMPLE: This sample gallery is created using Flash technology, but I aim to develop mine utilizing HTML, CSS & Javascript to ensure compatibil ...

Add some pizzazz to your design using jQuery!

I have been working on a web application using asp.net c#. I have a div element where I applied the following style to it at the server side: spanNivelRiesgo1.Attributes.Add("style", "display:none; visibility:hidden"); Now, I have a radiobutton list and ...

What is the process for altering the background color in this html5up template?

I am struggling to change the brown background color on my website. Despite updating various color values in the CSS file such as'backgroundcolor', I seem unable to make any changes. I have tried altering multiple color entries, but nothing seems ...

Even if the width is not set to 100%, the div still breaks into a new row

Having an issue here. I'm working with 2 divs that should be displayed side by side. Both are enclosed in a div with max-width : n. I set width: 70% to the first div and width: 30% to the second div, expecting them to fully occupy the parent div. H ...

Prevent form clearing by implementing input validation

While working on setting up a sign-up form, I encountered an issue where I needed to validate whether the information entered already existed in the database. The code itself is functioning properly and can successfully detect if any existing data is foun ...

What is the best way to apply different styles to alternative children within a dynamically generated list?

I am currently implementing the following code snippet: $('.js-toprow:nth-child(even)').css("background:", "#ddd"); $('.js-toprow:nth-child(odd)').css("background:", "#ff0000"); Within the function: function resetSlides() { conta ...

Tips for updating the left positioning of a Div element on the fly

Although my title may not fully explain my goal, I am dealing with dynamically created div elements. When a user triggers an ajax request to delete one of the divs, I want to remove it from the DOM upon success. The issue arises in adjusting the layout aft ...

The CSS star rating system is malfunctioning

I'm struggling to implement a rating star system in my project. I have experimented with various code snippets, but none seem to be functioning properly. Take a look at the outcome: https://i.sstatic.net/g3DvH.png ...

Exploring MVC 5's View and Controller Components

In my GetCourseList.cshtml file (view), I have the following code that displays fetched information from the database: @model IEnumerable<WebApplication8.Models.Courses> @{ Layout = null; } <!DOCTYPE html> <html> <head> ...