How to show hyperlink for particular text in html

Question

Here is my code

<a href="#" ><font style="color:#000000;">
    PLEASE CLICK HERE FOR MORE DETAILS</font> </a>

Here, Hyperlink is given to whole word PLEASE CLICK HERE FOR MORE DETAILS

I need to give hyperlink on mouse hover to the text HERE Is it possible using html itself or I need to go with JavaScript/Jquery?

Answer 1

Try this

<font style="color:#000000;">PLEASE CLICK <a href="#" >HERE</a> FOR MORE DETAILS</font> 

Add styles

a {
  text-decoration:none; 
}
a:hover{
  text-decoration:underline;
}

Answer 2

You can change your HTML to:

<span style="color:#000000;">PLEASE CLICK <a href="#" >HERE</a> FOR MORE DETAILS</span>

Answer 3

Try something like this:

css

   span{
    color:#000;
    }

    span a{
    color:blue;
    }

HTML

<span>PLEASE <a href="#">CLICK</a> HERE FOR MORE DETAILS</span>

Answer 4

Use this

HTML:

<span><font style="color:#000000;">
    PLEASE CLICK HERE FOR MORE DETAILS</font></span>

JQUERY:

$("span").mouseover(function() {
$(this).html("PLEASE CLICK <a href='#'>HERE</a> FOR MORE DETAILS");
});

DEMO

Answer 5

from what I understand of what you're saying I think you need a link that just looks like a link when the mouse hovers on it.

There are many ways to do this but by far the simpler is using simple CSS and HTML.

Try using:

HTML:

    <p> hello this is a <a href="#" class="hoverL">link</a>, 
        but it doesn't look like one unless you hover your mouse on it</p>

CSS:

 .hoverL{
            text-decoration: none; /* Eliminates the decoration (the underline)*/
            color: inherit; /* inherits the text color from it's parent */
    }

.hoverL:hover{
            text-decoration: underline; /* underline it again */
            color: blue; /* and give it again it's original color */
    }

Here you can see a working jsfiddle example: http://jsfiddle.net/G6Lb6/

hope this is what you needed :)

Answer 6

Please don't use <font style="color:#000000;"> it's deprecated and was declined by HTML 4.01

You can just link "Here" inside a span:

<span>Please click <a href="#">here</a> for more details </span>

a:hover {
 color:#000;
}