Revealing non-div elements with the CSS hover attribute

I'm looking for a way to utilize the CSS hover property on individual elements within a div in order to affect specific span elements. For example, hovering over "something1" should reveal "text1" and so forth.

Is there a way to achieve this without having to insert multiple divs?

span {
  display: none;
 }

.something1:hover .text1 {
  display: block;
  }
<div class="container">
    <i class="something1"></i>
    <i class="something2"></i>
    <i class="something3"></i>
    <i class="something4"></i>
    <span class="text1">Show 1</span>
    <span class="text2">Show 2 </span>
    <span class="text3">Show 3</span>
    <span class="text4">Show 4</span>   
</div>

htmlcsshovercss-selectors

Answer №1

To achieve this effect, you can utilize the CSS ~ general sibling selectors in the following manner:

The ~ combinator separates two selectors and selects the second element only if it comes after the first element and they both share a common parent. - Mozilla MDN

span {
    display: none;
}
.something1:hover ~ .text1 {
    display: block;
}
<div class="container">
    <i class="something1">Something 1</i>
    <i class="something2"></i>
    <i class="something3"></i>
    <i class="something4"></i>
    <span class="text1">Show 1</span>
    <span class="text2">Show 2 </span>
    <span class="text3">Show 3</span>
    <span class="text4">Show 4</span>   
</div>

Select all span elements with classes starting with "textx":

span {
    display: none;
}
.something1:hover ~ span[class*="text"] {
    display: block;
}
<div class="container">
    <i class="something1">Something 1</i>
    <i class="something2"></i>
    <i class="something3"></i>
    <i class="something4"></i>
    <span class="text1">Show 1</span>
    <span class="text2">Show 2</span>
    <span class="text3">Show 3</span>
    <span class="text4">Show 4</span>   
</div>

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

Distribute divs of equal width evenly within a grid

I'm facing a unique challenge at the moment. I'm attempting to create a grid system where all elements have a fixed width of 200px each. What I envision is a clever grid setup using only CSS, where each "row" will strive to accommodate as many el ...

htmlcss

Tips for transforming an SQL Server query into JSON format

I need to construct a table in a view utilizing the output of this particular SQL Query SELECT f.empresaid, e.fantasia AS Company, f.filialid, f.fantasia AS Branch, u.consultorid ...

htmljsonsql-serverasp.net-mvcview

Get the value of a CSS property in Python by parsing the rendered HTML

Currently, I am using Selenium and PhantomJS in conjunction with Python for the purpose of crawling rendered web pages. While it is a straightforward process to identify the presence of specific words within the HTML content (e.g. if "example" in html...), ...

pythonhtmlcssseleniumphantomjs

Steps to convert HTML <li> elements into HTML <datalist> elements

In my HTML file, I have a list of objects within li elements that I would like to transfer to an HTML datalist within the same file. I am currently working on a Node.js Express framework application where the data within the li elements is coming from an S ...

htmlnode.jsexpress

How can I output HTML code using php echo without using quotation marks?

My issue involves printing out HTML code that is not stored as a simple string, requiring me to decode it before echoing. The problem arises when I echo the decoded value and unwanted quotes appear, disrupting the output. Here's an example: <div> ...

phphtmldecoding

Using Angular to convert JSON data to PDF format and send it to the printer

Currently, I am retrieving JSON data from an API and now need to convert this data into a PDF format for printing. I am encountering an issue where the CSS styling for page breaks is not rendering properly within my Angular component. When I test the same ...

cssjsonangularpage-break

Looking to screen usernames that allow for the use of the DOT (.), underscore (_), and Dash (-)?

I am using jQuery to filter usernames that are exactly 3 characters long. The validation criteria includes only allowing the following special characters: ., _, and - var filter = /^[a-zA-Z0-9]+$/; Therefore: if (filter.test(currentval)) { //valid ...

javascriptjqueryhtml

Struggling to make images wrap properly using flexbox

I've been struggling to get these images to wrap properly within my container. They keep overflowing beyond the designated width and I'm not sure if it's because I have paragraphs placed under each image. Any ideas on how to make 3 images ap ...

htmlcssflexbox

Retrieve the outer-HTML of an element when it is clicked

I am working on a project to develop a tool for locating xpath, and I am seeking the most efficient and user-friendly method for allowing the user to select the desired element on a webpage. Ideally, this selection should be made with just a single click, ...

javascriptpythonhtmlseleniumxpath

How to send parameters to the jQuery delete button click event handler

Here is the jQuery code I am working with: $('#btnDelete').click( function() {//Do the delete here via jquery post}); In my table, each row has a delete button like this: <a id="btnDelete">Delete</a> I need to pass parameters to t ...

javascriptjqueryhtmlasp.net-mvcxhtml

What is the best way to show the logged-in user's name with PHP?

After a successful login, I want to display a personalized greeting message to the user in PHP (e.g. "Hey User!"). However, the code $username = $_SESSION['username']; is not retrieving the username properly and displays nothing (Hey !). Here ...

phphtmlphpmyadmin

Using pre-existing CSS state background colors in GTK3

I am currently in the process of adapting a PyGTK2 application. This particular application performs tasks such as: self.normal_color = editor.style.base [Gtk.STATE_NORMAL] self.insensitive_color = editor.style.base [Gtk.STATE_INSENSITIVE ...

pythoncssgtk3

A specific class has no border on its left side

Is there a way to use CSS to disable the left border to the right of a cell with a specific class? In the scenario shown in this image, the right border appears double due to the combination of the "selected" class border and the default gray border. I wo ...

cssborder

Removing the &nbsp; space character from a webpage using server-side code

I am experiencing difficulties with replacing a blank space in a webform control label. Below is the code for my label: <label id="Lbl1" runat="server">TEXTA&nbsp;&nbsp;TEXTB</label> My goal is to replace the blank spaces in the labe ...

c#htmlasp.netvb.net

Removing the switcher outline in Bootstrap Switch: a step-by-step guide

I have implemented the bootstrap-switch - v3.3.1, however, I want to remove the default blue outline that appears around the switcher when toggling it on or off. Despite setting style="outline: 0 none; for the input, the outline remains visible. Below is ...

javascripthtmlcssbootstrap-switch

Can CSS `content` support the combination of different font styles?

I have set up a CSS element to insert some content. Here's the code: .foo:after { content: "Bold, italics"; } What I want is for the word "Bold" to appear in bold font-weight and the word "italics" to appear in an italic font-style. I know that ad ...

htmlcsscss-content

Using Single Quotes as Parameters in JavaScript

I'm currently facing an issue with a function that is designed to populate a field in the parent window when clicked. Specifically, it is meant to fill in a text field with a name. The challenge I am encountering arises when the field contains a sing ...

javascriptasp.nethtmlsyntaxparameters

There are two images within a container - one as the background and the other as the foreground. What measures can I take to

I am experiencing an issue with two images on my website. One is set as the background and the other is displayed above it, appearing properly when viewed on larger screens but distorting when the browser window is minimized. You can view the site at the f ...

htmlcsswordpressresponsive-design

enabling the editing of two input fields by clicking on a button

Looking to make two input fields editable with a button click. Once edited, the data from these fields will be sent to separate columns in a database using ajax. Struggling to find a solution through online search. Any advice is appreciated! ...

jqueryhtmlajax

What could be the reason for the absence of margin on the top and bottom

.separator { border: 1px solid #000000; margin: 10px; } <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>Separator</title> </head> <body> &l ...

htmlcss