How to Make Text Hovering Area not a Full Line?


Tags: html,css,html5,css3,hover

Problem :

Here's my code:

<a href="index.html"><p class="link">Link</p></a>

Then in CSS:

p.link {color:black}
p.link:hover {color:aqua}

How do I make it so that the link doesn't get selected when I'm not directly over it? Because it still changes color when I move my mouse to the left or right side. In other words, how do I make the hover area of the text stop when the text stops? And not a full line?

I thought that the paragraph tag would prevent that, but it did not work.



Solution :

Simply logically speaking, you would put your <p> tag around your <a> tag as a <p> defines a whole block of text whereas an <a> usually defines a selection of text.

You would wind up with this

<p class="link"><a href="index.html">Link</a></p>

CSS:

a {color:black}
a:hover {color:aqua}

    CSS Howto..

    How to create a white border circle having white exclamation mark inside a box having a yellow background in html/css?

    How to denote common class names with slight numeral changes into one - CSS shorthand?

    How to correctly add nested divs

    How to wrap text of html button with fixed width

    how to put css in selected row in angular js?

    CSS can't be overwritten, no matter how ; Wordpress with responsive style_options.php

    How to select a child element inside a div using CSS

    How to select loose text between tags

    How to read Base64 VLQ code?

    How to make text labels stick next to an image in CSS?

    How can I refresh CSS caching?

    How to increase-decrease the number (i.e. 0, 1,4..) size in CSS?

    How do I switch external CSS files?

    How to not apply a webpage's CSS on the div I am inserting into it via content scripts?

    how to add dots (…) with the same width?

    How do I get a div to be positioned above an image?

    how to align buttons in css/html in one line horizontally?

    How to apply css using ng-class in angularjs

    Css: How to make position fixed 100% resizable with bottom padding? - JS Fiddle provded

    How to select multiple objects of a class for css manipulation

    Show first image and display none other image

    CSS - How to select multiple attribute values?

    How to align a

    into

    or when content it is dynamic?

    CSS Dropdown menu - How to add thumbnails

    How to set the height with css to 100% and make it fluid?

    CSS - How to remove comments and make CSS one line

    How to set a max-width only to text nodes not in a tag?

    How can I slide the sidebar out of view and make the content flexbox resize to fill the void?

    How to apply css to iframe content? [closed]

    How to run a different html file when device width changes?