We Keep Coding

How to click only on the text of a header and not the empty whitespace to the right? [duplicate]

This question already has answers here:
How can I make a div not larger than its contents?
(43 answers)
Closed 2 years ago.
I am trying to make a link on a header be clickable on the text of the header only. Problem is, in my case, the link is still clickable, even when there is no text(it still clicks on empty blue space to the right).
Example:
as you can see, the whole blue is clickable, but I just want the click to end after the "Hello World Link" word.
Is there a way to allow to click only on the text "Hello World Link" and not the rest of blue empty space to the right?
My code:
<a href="blah blaha ">
<div class="headerText">
<h2>#title</h2>
</div>
</a>
CSS:
.headerText{
h2:hover {
background-color: yellow;
}
}

Simply use display: inline-block; on your .headerText DIV
.headerText {
display: inline-block;
}
.headerText h2:hover {
background-color: yellow;
}
<a href="blah blaha ">
<div class="headerText">
<h2>#title</h2>
</div>
</a>
SCSS:
.headerText{
display: inline-block;
h2:hover {
background-color: yellow;
}
}

For applying link to text only, move the a element just above the text element(here h2).
Try this:
<div class="headerText">
<a href="blah blaha ">
<h2>#title</h2>
</a>
</div>
Also check the style of h2. If it has a fixed width wider than the text, it may cause again this problem. Better to provide an HTML,CSS snippet in the question.

I don't know whitch are the defined styles of yours components, but on some cases you can use the css empty pseudo class, and set the pointer-events property as none. This approach just work in the case that the element doesn't have any children and also the element content is empty.
a:empty {
pointer-events:none;
}

When I hover over the image, I want the overlay hover effect to activate

When I hover over the image, I want the fade effect of the overlay to activate. I just started working at my first site and I am a javascript begginer, so I need some help. Here is a jsfiddle.
HTML Code:
<div class = "leftpart">
<a href="http://www.google.com">
<img src="images/test.jpg"/>
<div class="flex-caption hvr-fade">Adventurer Lemon</div>
</a>
</div>
I do not have any javascript code.

Inset Css one more Class
Your Main Class add Hover Effect then use .leftpart:hover and then
your footer color change then after add hvr-fade then effece of main
Div hover
.leftpart:hover .hvr-fade
{
background-color: #2098d1;
color: white;
}
Live Demo

You Can do it By css also
.leftpart a img:hover{opacity:0.8;}

How to show hyperlink for particular text in html

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?

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;
}

You can change your HTML to:
<span style="color:#000000;">PLEASE CLICK <a href="#" >HERE</a> FOR MORE DETAILS</span>

Try something like this:
css
span{
color:#000;
}
span a{
color:blue;
}
HTML
<span>PLEASE CLICK HERE FOR MORE DETAILS</span>

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

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 link,
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 :)

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 here for more details </span>
a:hover {
color:#000;
}

Change the default color code of URL

Friends
I want to change the default blue color of the folloowing URL to RED , I tried using
style="color:red but it didnt help.
Please suggest a better approach.
<div class="row-fluid">
<div class="span12" style="color:red">${fn:length(alertStatusForm.totalNotSentRecipient)}
</div>
</div>

You need to edit the actual a element. You can do this multiple ways.
In your CSS File (this will edit all links)
a:active, a:link, a:visited {
color: red;
}
With Inline Styling
Apply the style directly to the a element.
<a style="color: red" ...
Or, create a class in your CSS File
You could create a class in your CSS file:
a.myLink:active, a.myLink:link, a.myLink:visited {
color: red;
}
Then apply the class to your link:
<a class="myLink" ...

I see that your <a> link has the class "underline".
You can add this css code to your CSS file to make the text red:
.underline a:active, .underline a:link, .underline a:visited {
color: red;
}
or apply it directly in the HTML like so:
<div class="row-fluid">
<div class="span12"><a style="color:red" href="/event/alert/recipient/list/${alertStatusForm.forAlert.id}" class="underline">${fn:length(alertStatusForm.totalNotSentRecipient)}</a>
</div>
</div>

You applied to color to div, you need to change color of a instead of div
Live Demo
<div class="row-fluid"><div class="span12" ><a style="color:red" href="/event/alert/recipient/list/${alertStatusForm.forAlert.id}" class="underline">${fn:length(alertStatusForm.totalNotSentRecipient)}</a></div></div>
Its generally a good practice to use css class instead of directly changing style using style attribute.
CSS
.red-color-a
{
color:red;
}
HTML
<div class="row-fluid"><div class="span12" ><a class="red-color-a" href="/event/alert/recipient/list/${alertStatusForm.forAlert.id}" class="underline">${fn:length(alertStatusForm.totalNotSentRecipient)}</a></div></div>

You need to target the <a> tag instead of its parent span :
<a style="color:red"> ... </a>
The default styles from the anchor tag are going to overwrite the <span> tag that is wrapping it.

use text decoration none
Visit google

Trying to make a button in html with javascript

I have never coded before so i dont know much, i watched this youtube video on how to make a js button youtube video
<div style="position:absolute; margin-left:1202px;"
<input type="image" src="images/login.png"
onmouseover="javascript:this.src='images/loginpressed.png';"
onmouseout="javascript:this.src='images/login.png';" />
</div>
i can see that the code works in dreamweaver, but for somereason, others cannot see it on the website

You forgot a > after <div style="position:absolute; margin-left:1202px;". Because of that, the button is now part of your div's declaration.
B.t.w. You can achieve a similar result by using another element than input type=image, like a span or div or an actual link element (a href) and apply some CSS to give it a different background image. For instance:
HTML:
<span class="button" onclick="alert('clicked');">Caption</span>
CSS:
.button {
display: inline-block;
height: 30px;
background-image: url(normalstate.png);
}
.button:hover {
background-image: url(hoverstate.png);
}

It may possible that path to your images not found at other place.