Display a div when hovering over a span with custom styling

Don't let the title fool you.

http://jsfiddle.net/whb8A/

I'm struggling to style the text inside a span tag within a div. The h3 element shouldn't be nested in the span, but removing it makes it difficult to style with CSS.

When hovering over the image in the jsfiddle, a hidden div is shown - that's the effect I want. Any suggestions on how to achieve this without the h3 tag?

Should I consider using jQuery instead? If so, any tutorials or guides would be appreciated. Thank you!

UPDATE: Despite the help received, I realize I haven't explained myself clearly.

The left side shows how I want it styled, but removing the h3 tags and class .info changes the styling to resemble the right side. It's important for me to control the border width, position, and padding.

csshtml

Answer №1

To improve the appearance of text within an <a> tag, consider placing specific style rules right below the tag itself. By doing this, you can effectively overwrite the default styling that is applied to anchor tags. Here is an example:

.highlighted a {
    color: #333;
    font-weight: bold;
}

Answer №2

I successfully resolved the issue if anyone is interested.

Instead of utilizing h3 tags and a span, I decided to eliminate both and substituted with a div inside the hover appearing div. You can view the changes in the provided fiddle link below. It now conforms to html5 standards as desired. Thanks for all the assistance!

http://jsfiddle.net/whb8A/62/

Answer №3

Upon removing the <h3> tag, I noticed a decrease in the margin surrounding the text. To restore this margin, one can simply substitute the <h3> with a <span>, adjust the CSS accordingly to target the span instead of the h3, and include display: block within the declaration.

Answer №4

In your CSS, you have the following code towards the end:

.item a:hover .info {
    display: block;
    position: absolute;
    bottom: 10px;
    left: 30px;
    width: 250px;
    margin: 0;
    padding: 10px;
    background: #000;
}

This code targets all .info elements inside hovered a tags within an .item element. However, there is no .item element in your HTML.

To fix this issue, simply remove .item from the CSS and everything will work correctly when you eliminate the H3 tag.

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

CSS transformation on the go

Can anyone help me? I am trying to create an animation for a hamburger menu when checked and unchecked. I have managed to animate the menu, but I'm struggling with animating the left menu when transforming it to 0. &__menu { transform: transla ...

csssasscss-transitions

Rotate images every 5 seconds, pulling them directly from the server

I am looking to update the users every seven seconds on my website. To do this, I need to retrieve all user information from the server using JavaScript. What is the most efficient way to accomplish this task? My initial thought is to send an HTTP request ...

jquerypythonhtmldjango

Ways to identify when a React child element is overflowing

tl;dr How can I create a component that hides overflow and toggles views with a button? For example, the user can initially see tabs 1, 2, and 3 while tabs 4, 5, and 6 are hidden. Clicking a button will hide tabs 1, 2, and 3, and show tabs 4, 5, and 6 with ...

javascripthtmlcssreactjs

Conceal the countdown clock and reveal the message box

I am attempting to create a functionality where the text box will replace the timer when it reaches 0, and then the timer will be hidden. I am seeking a straightforward solution using either the 'v-show' or 'destroy' property in vue.js ...

javascripthtmlcssvue.jsvuetify.js

CSS Only flyout navigation - reveal/hide with a tap or click

I want to make adjustments to a CSS-only menu that has a horizontal flyout effect triggered by hovering. I am looking to achieve the same effect on touch or tap - meaning, one tap to open the menu and another tap to close it. Is it possible to accomplish ...

css

Issues with Opera displaying specific characters when using webfonts

Perhaps it's not supposed to work this way, but hear me out. I'm utilizing Google Web Fonts and adding the PT Sans font like this: <link href="https://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" ty ...

htmlcssfont-facewebfonts

What is causing my Bootstrap Controls to malfunction?

I'm trying to create a Bootstrap carousel that shows 3 items at once and includes controls to switch between them. The carousel I've made does display the three items, but for some reason, the controls are not responding when clicked. I'm un ...

javascripthtmlcsstwitter-bootstrapbootstrap-carousel

Implementing Bootstrap 3 mobile design by necessity

My Wordpress site uses a Bootstrap 3 layout where the loop displays posts using 2 different templates. Type 1 <div class="row"> <div class="col-md-4"> <h1>title</h1> <h3>sub</h3> </div> ...

jqueryhtmlcsswordpresstwitter-bootstrap

Unslider: Ensure images stay centered even on smaller screen resolutions

Utilizing Unslider in a recent project from . Managed to align the slider halfway, but facing an issue with off-center slides on resolutions of 1920px and lower. The image width is 3940px. Attempted to implement the code snippet from this answer like so: ...

javascriptjqueryhtmlcssunslider

Tips for inserting a DIV and SCRIPT from a single HTML template into a webpage

I'm working with an HTML template that contains a DIV with a button and a script with a function to call when the button is clicked: <div id="CLC_Form"> various text and checkbox inputs go here... <br> <input type="button" ...

javascriptjqueryhtml

Sliding background in a multi-column accordion

I've hit a roadblock with this project. I'm working on setting up a FAQ section that needs to display its items in two columns on desktop, each with a drop shadow effect using Bootstrap 4. I've experimented with Flexbox and CSS columns with ...

htmlcssgridaccordion

Samsung devices exclusively showcase background in responsive design

I am encountering a major problem with my website design, specifically with its compatibility on mobile devices. To ensure its responsiveness, I have tested the design on my iPhone, iPad, and Windows Phone. Unfortunately, since I lack an Android device, I ...

androidhtmlcssbrowser

Basic AJAX request not functioning properly

I am encountering an issue with a very simple AJAX call on my localhost. I am using a Windows 10 Machine with XAMPP running. I have checked the packages, and it seems that the AJAX request is not being sent to handle.php. Can someone help me figure out wha ...

phpjqueryhtmlajax

Having trouble sending data to an API through jQuery: the function is not functioning properly

Currently, I am in the process of developing an HTML form that allows users to input values into text fields and submit them to an external API called ThingSpeak. This API then uses the received values to generate a plot displayed within an iframe. Althoug ...

javascripthtmljqueryajax

Delivering Background Videos with Node.JS

Apologies if my question seems off base or confusing, as I am not very knowledgeable in the world of nodejs. I have been comfortable using just plain PHP and Apache for a while until I discovered ZURB Foundation's stack with Handlebars and SASS, along ...

javascriptnode.jshtmlvideobackground

After loading ajax content onto the page, the scroll bars fail to appear

I am currently constructing a website that loads page content through ajax. Everything seems to be functioning perfectly, except for a peculiar issue I have encountered in Chrome and Safari. Surprisingly, it is working flawlessly in IE! The problem lies i ...

htmlcssajaxscroll

Conceal the menu in Angular Material when the mouse leaves the button

When the mouse hovers over a button, a menu is displayed on the website's toolbar. The menu is set to close when the mouse leaves a surrounding span element. Now, there is an attempt to also close the menu when the mouse leaves the triggering button i ...

javascripthtmlangularangular-material

Header Dropdown Problems

Hey there, I have a question regarding my header setup. I currently have two headers in place: Whenever I click the notification button, the dropdown menu seems to disrupt the layout of the header. Here is a screenshot for reference: Below is the CSS cod ...

htmlcss

Challenge with CSS Box Shadow

Hey there, I've been attempting to add a shadow effect to a box inside another box but I'm struggling to achieve the desired outcome. <div class="box effect2"> <div class="box effect2"> Box inside a box <div> &l ...

css

What steps can I take to stop search engines from crawling and indexing one specific page on my website?

I'm looking for a way to prevent search engines from indexing my imprint page. Is there a method to achieve this? ...

htmlseo