When you hover over the text, a new div will appear

Check out this code snippet on CodePen

HTML 

<div class="boxes"> </div>

<div class="hoverover">
 hello
</div>

CSS

.boxes {
 background-color: yellow;
 height: 100px;
 width: 200px;
 display: none;
}

.hoverover:hover .boxes {
 display: block;
}

I am currently attempting to achieve a simple CSS effect, but I'm encountering some difficulties. My goal is to hover over text and trigger the appearance of another element in a different div using only CSS. Despite my attempts with the 'display: block' property, it seems to be ineffective. Inline styling has also proven unsuccessful. Is there something obvious that I'm overlooking? Thank you for any help in advance!

css

Answer №1

If you want to achieve this effect using only CSS, you will need to position the element that appears after the hover and utilize the adjacent (+) selector.

.boxes {
 background-color: yellow;
 height: 100px;
 width: 200px;
 display: none;
}

.hoverover:hover + .boxes {
 display: block;
}
<div class="hoverover">
 hello
</div>

<div class="boxes">boxes</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

Trouble getting CSS and JavaScript to function properly with HTTPS?

It seems that the css and js files are functioning properly on , but not on . As a novice in web design and javascript, I am struggling to find a solution to this issue. Trying to link the CSS file with "//isdhh.org/css/style.css" has not resolved the pr ...

javascriptcsshttps

Is it possible to convert the text.json file into a jQuery animation?

Looking to extract information from text.json and integrate it with my jquery.animation(). My goal is similar to the one demonstrated here. Instead of using "data" attributes like in that example, I want to parse the text based on the "ID" property as a k ...

javascriptjqueryhtmlcssjson

The alignment of the footer navigation is off-center

I can't seem to get my footer navigation centered properly. I've tried adjusting the CSS but it's still not working as expected. .main-footer li { float: left; font-size: 0.85em; padding: 0 0.5em; margin-bottom: 0.5em; } .main-fo ...

csscss-floattext-align

Tips for keeping a div element at the top of the page

I am looking to have a div stick to the top of the page when someone scrolls down When the page is scrolled, the green div with class stickdiv should automatically stick to the top var left = document.getElementsByClassName("stickdiv"); for( var i = 0; ...

javascripthtmlcss

Can you show me how to magnify multiple images when hovering over them without altering their dimensions?

I am working on a gallery that features multiple images and I want the images to zoom in when hovered over without resizing the container. My project is built using Bootstrap 4. <div class="row"> <div class="col-12"><img ...

htmlcssimageanimationzooming

Failure of Outlook 2007, 2010, and 2013 to Recognize Conditional CSS

I am currently working on a design for a responsive email. The layout is functioning well in all email clients tested using Litmus, except for Outlook 07/10/13 due to its challenging word rendering engine versions. To ensure correct display across differen ...

htmlcssoutlookhtml-emailconditional-statements

Angular 2: Dealing with Missing Image Loading

When viewing an HTML file containing the following code: <div> <img src="New-Google-Logo.png"/> </div> The image file New-Google-Logo.png is expected to load from the same folder as the HTML file. However, after running ng s ...

htmlcssangular

Achieving CSS Buttons That Change to Green When Clicked and STAY Green

I've been tasked with working on a front-end project for a website that involves buttons changing color when clicked and staying that color. Here is the CSS <style> code I have written for these specific buttons: .button { background-color ...

javascriptjqueryhtmlcss

Tips for seamlessly hiding display images with HTML

In my quest to create a basic image slider, I've managed to achieve it using a combination of JavaScript and HTML. Take a look at the code provided below. I've included all the necessary codes for clarity's sake. However, the issue arises w ...

htmlcss

Putting the second line of a list in a paragraph element with indentation (excluding UL or OL)

I am working with a table that has the following structure: html { width: 400px; } <table> <tr> <td>Description:</td> <td style="white-space: pre-wrap;"> Some text which could be quite long with some &apos ...

htmlcss

Hide/Show overflow causing a disruption in my perspective

I am puzzled as to why my paragraph is not starting on a new line despite the overflow property set on the previous element. Take a look at my plunker, adjust the overflow property in line 11 to hidden and it will display correctly. When set to visible, i ...

htmlcss

How can I use Ajax to show only one div on the entire page while keeping the CSS and other header content intact

One of my clients is looking to integrate a merch shop into their website. The existing merch page is not visually appealing and doesn't match the aesthetic of the client's site. I am considering using AJAX GET to fetch the content of the merch p ...

javascriptcssajaxjquery

Having trouble retrieving the animation keyframe names from the SCSS file in animate.css

I'm currently experimenting with incorporating animate.css into my React/Next.js project. While I can easily create animations using animate.css's inline class names, I'm facing challenges in calling animate.css's keyframe animations fr ...

cssreactjsnext.jscss-modulesanimate.css

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=" ...

htmlcsssvgthymeleaf

I've been attempting to relocate a CSS element at my command using a button, but my previous attempts using offset and onclick were unsuccessful

I am trying to dynamically move CSS items based on user input or button clicks. Specifically, I want to increment the position of elements by a specified number of pixels or a percentage of pixels. Currently, I am able to set the starting positions (top a ...

javascriptjqueryhtmlcssajax

Tips for setting uniform line-height across an entire project by adding a fixed value to the font size

I need to update line heights for a complete project. The requirement is that all line heights should equal the font size plus 4 pixels. Is there a simple way to do this using SCSS? Adjusting based on percentage would be easy, but the specific value is g ...

htmlcsssassfont-size

Equal spacing title in horizontal menu with Bootstrap design

Is there a way to evenly distribute menu links with varying text lengths in equal width bootstrap columns? Adjusting the column class between col-md-1 and col-md-3 doesn't seem to give accurate spacing. If you want to see, I've set up a fiddle h ...

csstwitter-bootstrap

Header media query in CSS3 not functioning as expected

Currently, I have two separate style sheets for mobile and desktop versions. My intention is to default to the mobile style sheet. Upon examining my header, I have included the following: <link rel='stylesheet' media='all' href=&ap ...

cssmobileresponsive-designmedia-queries

Troubleshooting Select2 frontend design in Bootstrap 4

I've been working on implementing Select2 with Bootstrap 4 for my <select> elements. Unfortunately, I ran into an issue because there isn't an official Bootstrap 4 template for Select2. However, I came across this project which seems to be ...

htmlcsstwitter-bootstrapbootstrap-4jquery-select2

Don't waste time creating multiple popups for changing content - streamline your process

Challenge I've successfully extracted information from an array and displayed it dynamically in a tooltip/popup window above each photo on the page. However, with 56 different individuals at various locations, arranging them neatly in a grid poses a ...

javascriptjqueryhtmlcss