I need to underline anchor links which are surrounded by text on hover.
I am looking for a result similar to below but without targeting any links from id's or classes because it would be same for all the links.
How can I put underline for the links which are surrounded by text, using css(or javascript if not)
Is it possible?
a{
text-decoration: none;
}
a#withText:hover{
text-decoration: underline;
}
<span> Alone link <span>
<br/>
<span> Text around <a id="withText" href="#"> Text surrounded link </a> Text around </span>
You could use span > a:hover this will target all a that comes as a direct child of span.
a{
text-decoration: none;
}
span > a:hover{
text-decoration: underline;
}
Alone link
<br/>
<span> Text around <a id="withText" href="#"> Text surrounded link </a> Text around </span>
If your a is always within a span you can target it like this:
span a:hover {
text-decoration: underline;
}
This targets all a's within a span.
As far as I know there is no way to deal with pure "text nodes" in css selectors. I'd go to JS, where you can easily check if the text of the link is equal to all the text of it's parent element.
Here is a fiddle using jquery, but you can do it also in plain javascript.
$("a").each(function(){
if($(this).text().trim() == $(this).parent().text().trim()){
//This link is the only content of parent item, so...
$(this).addClass('no-underline');
}
});
a{text-decoration:none}
a:hover{text-decoration:underline}
a.no-underline:hover{text-decoration:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>text arround the link</p>
<p>text arround the link on both side</p>
<p>the link with text after it</p>
<p> a link alone (whitespaces arround) </p>
Related
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;
}
I'm trying to select the first h1 inside a div with a class called detail_container. It works if h1 is the first element within this div, but if it comes after this ul it won't work.
<style type="text/css">
.detail_container h1:first-child
{
color:blue;
}
</style>
</head>
<body>
<div class="detail_container">
<ul>
<li></li>
<li></li>
</ul>
<h1>First H1</h1>
<h1>Second H1</h1>
</div>
</body>
</html>
I was under the impression that the CSS I have will select the first h1 no matter where it is in this div. How can I make it work?
The h1:first-child selector means
Select the first child of its parent
if and only if it's an h1 element.
The :first-child of the container here is the ul, and as such cannot satisfy h1:first-child.
There is CSS3's :first-of-type for your case:
.detail_container h1:first-of-type
{
color: blue;
}
But with browser compatibility woes and whatnot, you're better off giving the first h1 a class, then targeting that class:
.detail_container h1.first
{
color: blue;
}
:first-child selects the first h1 if and only if it is the first child of its parent element. In your example, the ul is the first child of the div.
The name of the pseudo-class is somewhat misleading, but it's explained pretty clearly here in the spec.
jQuery's :first selector gives you what you're looking for. You can do this:
$('.detail_container h1:first').css("color", "blue");
For that particular case you can use:
.detail_container > ul + h1{
color: blue;
}
But if you need that same selector on many cases, you should have a class for those, like BoltClock said.
you can also use
.detail_container h1:nth-of-type(1)
By changing the number 1 by any other number you can select any other h1 item.
You could wrap your h1 tags in another div and then the first one would be the first-child. That div doesn't even need styles. It's just a way to segregate those children.
<div class="h1-holder">
<h1>Title 1</h1>
<h1>Title 2</h1>
</div>
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;
}
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
i'm wondering how to achieve this kind of thumbnail gallery...
http://cargocollective.com/saintea
like when you roll over the thumbnail,
it gives an highlight effect to the title at the same time even though they are two separate elements.
I could make them as one file, but the reason why I want to have them separate is to assign
different effects :) !
can someone please lend me a hand?
thank you so much for reading this post !!!
have a great day !
It's just two <div>s in a link tag. But block elements in inline elements aren't valid, so you could better use <span> elements in a link tag like this:
HTML:
<a href="#">
<span class="one">text</span>
<span class="two">something else</span>
</a>
a:link span, a:visited span {
display: block; /* <-- for example */
color: blue;
}
CSS:
a:hover span.one {
color: yellow;
}
a:hover span.two {
color: orange;
}
As the other answers indicate, you could do it with both javascript and CSS. The page uses javascript and the framework jQuery to do it.
I made a demo of how it can be done both ways: here.
Given the following HTML:
<a href="#" id="theLink">
<img id="theImage" src="http://dummyimage.com/100x50/000/fff&text=Some+image" />
<span id="theText">Some text</span>
</a>
You can either do it with jQuery (this is roughly how that page does it):
$("#theImage").hover(
function() {
$(this).fadeTo("fast", 0.7);
$("#theText").addClass("hover");
},
function() {
$(this).fadeTo("fast", 1);
$("#theText").removeClass("hover");
}
);
where the class hover styles the text.
Here, you are telling jQuery to fire one function when you hover over the image, and another function when you hover out of the image. $("this).fadeTo sets the opacity of the image, while $("#theText").addClass.. well, it adds the class to theText.
(ofcourse, you don't need jQuery to do this, it's just very handy to use such a framework because it abstracts away much of the work)
Or with CSS:
#imagelink:hover img {
/* See http://www.quirksmode.org/css/opacity.html for opacity */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity: 0.7;
}
#imagelink:hover span {
background-color: #66E8FF;
}
Here we're telling the browser that when we hover over the link with the id imagelink, the contents inside the link of type img should have an opacity of 70%, while elements of the type span should have a different background color.
It's perfectly acceptable to wrap just about any elements within a single anchor element. Most browsers already support this, and w/ HTML5 it's actually preferred. So I would just do:
<a href="#">
<img src="image.jpg" width="" height="" alt="" >
<p>Description of the image</p>
</a>
a:hover img { }
a:hover p { }
I'd do it the following way:
<img src="image.gif"
onmouseover="change image style, then change getElementById('comment') style"
onmouseout="change all back"/>
<span id="comment">some text</span>