On hover display text html

Display text over image on hover

I am trying to display a text over an image and it works, but when I mouse over the text, it blinks! https://jsfiddle.net/6k2Lhaje/ html:

div.title < display: none; position: relative; text-align: center; top: -170px; >a.wrapper:hover + div < display: block; >
TEXT HERE
 

8 Answers 8

It’s blinking because your cursor is actually no longer hovering over the div, but instead its hovering over the div, thus the hover method is no longer triggered.

you could try the following css:

div.title:hover, a.wrapper:hover + div

which will apply the hover when over the image, as well as over the div. Updated version of your jsFiddle here: https://jsfiddle.net/6k2Lhaje/7/

You could also use pointer-events to remove the problem:

However, it should be noted that this isn’t supported in IE10 or before.

It should be better with this

 
   
TEXT HERE
 

If you’re going to change the structure, wouldn’t you be better off moving the title div inside the tag, instead of adding a second div just to act as a wrapper?

div.title < display: none; position: relative; text-align: center; top: -170px; >a.wrapper:hover + div

Solution changed HTML structure

  
TEXT HERE
 

div.title < display: none; position: relative; text-align: center; top: -170px; >a.wrapper:hover .title

Your mouse doesn’t hover the wrapper, when it is on the text.

Change your Css to that, so you display block too when you hover the text:

a.wrapper:hover + div.title, div.title:hover

the main issue of that blinking is that the Text you are hovering is OUTSIDE of the a tag which is targetet with the hover effekt.

A better way to approach this problem would be to put the text inside the container which contains the image. Then position the text absolute above the image.

 
Text
  h1 < position:absolute; display:none; left:200px; top:150px; >a:hover h1

I believe that it blinks because your div.title is on top of the a.wrapper without being its child element. So when you enter div.title , the browser considers that a mouseleave event for a.wrapper occured while the hover effect for a.wrapper is still active.

A better way make the desired effect would be:

1. Use a parent div.wrapper for a and give it a fixed size. This makes things easier as a have display:inline by default.
2. Make div.title a child of a . This makes the link ‘visible’ when hover . In yours the cursor does not change on hover .
3. Make img fit its parent with width:100%
4. Use opacity:0 instead of display:none
5. Make div.title fill its parent with height:100% and width:100% . This way the mouseenter event for hover will match the one for the img
6. Set position:absolute on div.title and position it relatively from div.wrapper by setting position:relative on it.
7. Set opacity:1 on div.title:hover

div.wrapper < position: relative; width: 500px; >div img < width: 100%; >div.title < opacity: 0; height: 100%; width: 100%; position: absolute; top: 0; bottom: 0; >div.title:hover

 
  
TEXT HERE
  

1. You can set color:black on a to ovewrite the default blue.
2. You can add display:flex , align-items:center and justify-content:center to div.title to center the content on the image
3. You can add transition to div.title and div.title:hover . This makes a smooth transition effect and you almost don`t see it if you hover fast enought.

Источник

Make text show up on hover over button

Do an effect like this: https://i.gyazo.com/d353b657df39c0e6ff159bfdb713f6a4.mp4 when you hover over it. I’ve been able to find a few different things for this but none that act as I want it to in the video.

6 Answers 6

Use title in order to display your message:

Doesn’t work on buttons which are disabled. To make it work, set the button CSS to «pointer-events: auto».

Hi @MoJo, welcome to stackoverflow! You’re answering a question which is over 2 years old. Please try to answer new questions, this would be more helpful.

You can set the background color change of button using css as follows,

For all my React.JS ers out there, (and for folks that come after), I was able to achieve this by doing (and using the reactstrap lib):

Usage of Tooltip component

import < Button >from 'reactstrap' component=< > onClick= disabled > Cancel  > /> 

import React, < useState >from 'react' import * as Reactstrap from 'reactstrap' const Tooltip = props => < const [tooltipOpen, setTooltipOpen] = useState(false) const toggle = () =>setTooltipOpen(!tooltipOpen) // Warnings for component useage if (!props.component) < console.warn('Missing component for tooltip') >if (!props.tooltipContent) < console.warn('Missing content for tooltip') >if (props.component && !props.component.props.id) < console.warn('Component for tooltip has no id (must not have spaces)') >return (   isOpen= target= toggle= delay= > )> )> ) > Tooltip.displayName = 'Tooltip' export default Tooltip 

The most important parts are the style=> on the element and the nesting of the Button within a

Источник

How Display Text When User Moves Mouse Over an HTML Element

In this ultra-quick tutorial, you’ll learn how to display a brief description text (like a tooltip) when your users hover over an element, like an image or a link.

How to add the tooltip takes a few seconds You simply use the HTML title attribute: title .

Display text on hover (mouse over element)

Here’s a basic example of an image of the Rubik’s Cube. Move your mouse over this image and within a few seconds additional information about the Rubik’s Cube pops up:

Here’s the HTML markup for the image element above:

img src="url-to-image-file" title="The Rubik's Cube. A 3-D combination puzzle toy invented in 1974 by Hungarian sculptor Ernő Rubik." alt="A Rubik’s Cube" />

Let’s say you want to show a tooltip when your users move their mouse over a link/anchor element.

Move your mouse over this link to reveal the tooltip

a href="https://techstacker.com" title="Link to TechStacker’s front page" >Latest articlesa >

That’s all there is to it. You can add the title attribute to any HTML element.

Why is showing text when your users move their mouse over an element beneficial?

Let’s say you have an element that could evoke confusion for some people due to its simplicity. An example could be an icon. Most people cannot recognize more than a handful of icons, but there are literally thousands of different icons on display, in the western world alone.

By simply adding a title attribute onto an icon (e.g. inside an image element) people have the option of getting a clear description of the icon’s function where ever it exists in your UI.

Now you may think to yourself, how many people are aware that hovering over an element will sometimes reveal extra information?

That’s a great question. The answer is that it depends on your target audience. Most tech-savvy people know intuitively that hovering + waiting 1-2 seconds will often reveal extra information about the subject.

But what if your audience largely consists of non-tech savvy people, or perhaps just people who don’t browse a lot on the web?

Well, then my default action is to apply Luke Wroblewski’s universal advice:

If an icon is not clear, or at least not clear to a high percentage of people, then you either make a better icon or pair that icon with a brief description.

Anyhow, adding a title attribute, and of course, an ALT attribute (for screen readers, for the visually impaired) only has upsides. You don’t need to add it to everything, but if you’re in doubt, you might as well do it.

As an added bonus, at least ALT attributes also have an impact on SEO, at least indirectly, but probably also directly.

How so? Well, the ALT description falls under the accessibility category, which Google has made no secret has an impact on how they assess the quality of your website, which will affect your SEO ranking power.

As far as the title attribute, it used to impact SEO, but based on my latest research, it’s unclear whether it still does today. But again, there are no clear downsides to using the title attribute, only upsides.

Alternative tooltip methods

You might need a more custom version of the built-in HTML tooltip/title attribute. In that case, you can use JavaScript and CSS to both time and style tooltips for different use cases. I’ll cover that useful skill in a future tutorial (it’s on my to-write list!).

Has this been helpful to you?

You can support my work by sharing this article with others, or perhaps buy me a cup of coffee 😊

Источник

Display text when hover only using CSS

How do I display a text in the middle of the image only using css. Thanks for reading.

Ok. That’s not entirely true because I have an idea of how to help you, but just so you know, you will lose reputation incredibly quickly in the future if you do not post code.

3 Answers 3

 
 
text
 
​ 

#wrapper .text < position:relative; bottom:30px; left:0px; visibility:hidden; >#wrapper:hover .text

a.transparent < width: 200px; height: 200px; background: url("whatever.jpg"); display: block; text-decoration: none; >a.transparent span span < color:transparent; >a:hover.transparent span < display:block; width: 200px; height: 200px; background:rgba(255,255,255,0.5); >a:hover.transparent span span

You can try this. It is fully tested and hope it will helpful for you.

 
 
Rocket 
League
 
 

#container < position: relative; width:300px; >.title < position:absolute; left:50%; margin-left:-40px; margin-top: -40px; right:0; top:50%; bottom:0; font-size: 22px; color: red; display:none; >#container:hover .title

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.27.43548

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник