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
Related
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>
I have this code as a custom element:
<link rel="import" href="../paper-ripple/paper-ripple.html">
<polymer-element name="menu-item">
<template>
<style>
:host {
box-sizing: border-box;
position: absolute;
font-size: 16px;
width:100%;
}
.center{
text-align: center;
}
</style>
<div class="item">
<div class="content center" fit>
<content select="*"></content>
</div>
<paper-ripple fit></paper-ripple>
</div>
</template>
<script>
Polymer({
});
</script>
It is instantiated as follows: <menu-item>Home</menu-item>
Problem is, either the ripple fires and the link does not.
Or the link fires but the ripple does not.
How should I be doing this?
Thanks,
g3
I think the basic problem is that the way you have it structured, the anchor tag and the paper-ripple are siblings, so there's no way for the click event to bubble up from the ripple to the anchor, or vice versa.
One approach would be to have the anchor tag inside your element and use data binding, like so:
<div class="item">
<a href="{{url}}">
<div class="content center" fit>
{{text}}
</div>
<paper-ripple fit></paper-ripple>
</a>
</div>
...
<menu-item url="{{url('#/')}}" text="Home"></menu-item>
Full demo here:
http://jsbin.com/bumiva/3/edit
Another approach would be to use your original structure and add a click listener on the outer <div> and follow the link manually, like this:
http://jsbin.com/wadiwu/2/edit
Hope this helps.
I was able to get it to work by changing your code to create the element to have the anchor tags around the element, like so:
<menu-item>site</menu-item>
removing select="*" from your content element, and giving your :host style some height. I set mine to height: 32px;
How would you add a span tag before the text inside a hyperlink?
Right now, I'm using this:
<script type="text/javascript">
$("a").before('<span class="k-icon k-add"></span>');
</script>
I tried the above code but the required span is coming before the anchor tag
<span class="k-icon k-add"></span>Add
I need the link to look like this when it is parsed:
<span class="k-icon k-add"></span>Add
Any ideas?
Use prepend to add some content at the start of your element :
$("a").prepend('<span class="k-icon k-add"></span>');
I suggest you to add icons not with js but with pseudo elements in css
It will be something like this:
a.k-icon.k-add:before {
width: 10px;
height: 10px;
background: #ccc;
content: '';
}
http://jsfiddle.net/frsxy8vb/
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;
}
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>