I'm using this code to display an image link in the show view:
<%= link_to( image_tag("wikipedia.org.png", {alt: "Wikipedia", size: "24x24"}), #entity.wikipedia_url, {class: "plain", :target => "_blank", :rel=>"nofollow"} ) if #entity.wikipedia_url.present? %>
Which results in this when the mouse is over the image link:
The HTML that is generated:
<a class="plain" href="https://en.wikipedia.org/wiki/foobar" rel="nofollow" target="_blank"><img alt="Wikipedia" src="/assets/wikipedia.org.png" height="24" width="24"></a>
I would like to remove the hover color for image links, while retaining it for text links.
As such, I added:
a.plain {
&:hover {
text-decoration: none;
}
}
to the original scaffold.css.scss:
a {
color: #000;
&:visited {
color: #666;
}
&:hover {
color: #fff;
background-color: #000;
}
}
This did not remove the hover color. What do I need to change?
This is how I would do it in CSS:
a {color: #000;}
a:visited {color: #666;}
// `!important` overwrites whatever you or who else set before for the a element.
a:hover {color: #fff!important; background-color: #000;}
This worked:
a.plain {
&:hover {
background: none;
}
}
Related
Is it possible to specify the hyperlink color within the main CSS properties statement like below? I have tried several variations and no luck.
width: 100%;
color: #FFF;
background-color: #693F18;
a.link-color: #fff;
There are several different ways to style a hyperlink: a for the link itself, along with the following pseudo-classes:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
To change the colour, you're looking for the color property.
This can be seen in the following:
a {
color: cyan;
}
a:link {
color: blue;
}
a:visited {
color: red;
}
a:hover {
color: green;
}
a:active {
color: purple;
}
Link
I want my link only to change color after I click on it. I have added the appropriate a:link and a:visited pseudo-classes in the correct order. However, my link changes color when I refresh the page too and I don't want this.
I created a simple example for you
If you've never visited the link before, it will be black (default color)
If you've visited the link before, it will be blue
If you hover the link, it will be red
https://jsfiddle.net/ykrfqucw/1/
HTML:
emrerothzerg.com
CSS:
a{
color: black;
}
a:visited {
color: blue;
}
a:hover {
color: red;
}
a:active {
color: yellow;
}
SASS (if you like to have):
a {
color: black;
&:visited {
color: blue;
}
&:hover {
color: red;
}
&:active {
color: yellow;
}
}
#style {
background-color: red;
}
#style:focus {
background-color:yellow;
}
#style:visited {
background-color:yellow;
}
#style:active {
background-color:yellow;
}
Several ways to do it below. Hope it helps
<style>
div {
color: red;
}
button {
color: yellow;
}
button:hover {
color: green;
}
button:disabled {
color: inherit; /* This sets the color to red but I want yellow */
/* could do this but it's less flexible */
color: yellow;
}
</style>
<div>
<button disabled>Yo</button>
</div>
Above explains the problem that I have. I've tried using inherit, unset, initial but none of them achieve what I want. "inherit" is close but is uses the parent color. I would like to revert the color back to the original cover when an item is disabled even when its hovered without having to explicitly declare the color in the disabled pseudoclass.
You can use CSS variable to define your colors and avoid the change inside the pseudo class:
:root {
--main-color: yellow;
}
div {
color: red;
}
button {
color: var(--main-color);
}
button:hover {
color: green;
}
button:disabled {
color: var(--main-color);
}
<div>
<button disabled>Yoooooo</button>
</div>
Or make some changes to your selectors. Avoid the hover to be applied to the disabled button and this one will by default keep the initial color:
div {
color: red;
}
button {
color: yellow;
}
button:not([disabled]):hover {
color: green;
}
<div>
<button disabled>Yoooooo</button>
</div>
<div>
<button >Yoooooo yooo</button>
</div>
Why not using this?
The :not() CSS pseudo-class represents elements that do not match a list of selectors.
button, button:disabled {
color: yellow;
}
button:not(:disabled):hover {
color: green;
}
Or
button {
color: yellow;
}
button:not(:disabled):hover {
color: green;
}
https://codepen.io/anon/pen/XZepyB
div {
color: red;
}
button,
button:disabled {
/* assign the default colors together */
color: yellow;
}
button:hover {
color: green;
}
button:disabled:hover {
/* then override the disable state separately as needed */
color: #cc00cc;
}
Not sure if I understand you correctly, but this basic CSS mechanism would be:
div {
color: red;
}
button, button:hover:disabled {
color: yellow;
}
button:hover {
color: green;
}
<div>
<button>Yo</button>
</div>
<div>
<button disabled>Yo</button>
</div>
<div>
<button disabled>Yo</button>
</div>
Just add ":disabled:hover" to the "button" selector and remove the ":disabled" one:
button,
button:hover:disabled {
color: yellow;
}
Basically I'm looking for a way to apply a specific style to an linked image like:
<img alt="" src="/media/XXXX.gif">
because my css can't do it despite a > img and i found that css3 can target specific a link depending on file type.So i try :
.HPDroite a[href$=".gif"] {
text-decoration: none;
}
.HPDroite a[href$=".gif"]:hover {
text-decoration: none;
border: 0;
}
but nothing change, it's worth than before !
So what's the way to apply specific style to an a img ?
EDIT: after explaination by captain, my code look like:
.PartieDroite1 p {
padding: 0.3em;
}
.PartieDroite1 a {
color: green;
padding: em(2px);
font-size: smaller;
}
.PartieDroite1 a:hover {
color: black;
background: green;
text-decoration: none;
}
.PartieDroite1 a > img[src$=".gif"] {
text-decoration: none;
}
.PartieDroite1 a > img[src$=".gif"]:hover {
text-decoration: none;
border: 0;
background: none;
}
My goal is to set off the background property on a a img:hover.
Not sure I understand the question but if you are looking to set some css rules specifically to the image inside the link, you can put the into a class and call like such:
<a class="mylink" href="http://XXXX"><img alt="" src="/media/XXXX.gif"></a>
Then, to add css rules to it, you may call
.mylink img
{
/*Your css rules here*/
}
Hope it helps.
You need to alter your CSS, this code doesn't make sense:
.HPDroite a[href$=".gif"] {
text-decoration: none;
}
this is saying "target a class of HPDroite with a child element of an a tag that has an href ending in .gif".
Thus not targeting the a tag at all, nor the image inside.
I altered your code and made a codepen for you to see my changes.
See here: Codepen with fixes
Notice that I altered your CSS showing you how to target the a tag and how to target the image inside, as well as some added fanciness ;)!
Hope this helps and good luck with the project.
Updates due to change in question:
.PartieDroite1 p {
padding: 0.3em;
}
.PartieDroite1 a {
color: green;
padding: em(2px);
font-size: smaller;
}
.PartieDroite1 a:hover {
color: black;
background: green;
text-decoration: none;
}
.PartieDroite1 a > img[src$=".gif"] {
text-decoration: none;
}
.PartieDroite1 a > img[src$=".gif"]:hover {
text-decoration: none;
border: 0;
background: none;
}
First of all, you are setting text-decoration on the image, this should only be on the a tag, since an image has no text, changes like so:
.PartieDroite1 a {
color: green;
padding: em(2px);
font-size: smaller;
}
.PartieDroite1 a:hover {
color: black;
background: green;
text-decoration: none;
}
.PartieDroite1 a > img[src$=".gif"] {
border: 0;
background: none;
}
.PartieDroite1 a > img[src$=".gif"]:hover {
background: pink;
}
This updates the image by default to have no border or background and still allows the a tag to have no text decoration.
As an example, I set the background of the image :hover to make the background pink.
"So what's the way to apply specific style to an a img ?"
Well, above I have demonstrated how to change the style of all images in the .PartieDroite1 > a > img - here:
.PartieDroite1 a > img[src$=".gif"] {
border: 0;
background: none;
}
and how to alter the image when hovered, here:
.PartieDroite1 a > img[src$=".gif"]:hover {
background: pink;
}
thus answering your question as I would interpret it.
So what's the way to apply specific style to an a img
To style a specific image format you would use:
This selector method
img[src$=".png"] {
border-color:yellow;
}
img {
border: 12px solid green
}
img[src$=".png"] {
border-color: yellow;
}
img[src$=".jpg"] {
border-color: red;
}
<img src="http://hello-kitty.sanriotown.com/images/kitty.png" alt="" />
<img src="http://static.tvtropes.org/pmwiki/pub/images/Hello_Kitty_Pink_2981.jpg" alt="" />
If the image in inside a link then the style would be :
.HPDroite a img[src$=".png"] {
border-color:yellow;
}
NOTE:
However, if you are trying to style the link based on the image format then that is not possible as there is no parent selector
Our designer created this css for links
A
{
text-decoration: underline;
color: #E77C15;
}
A:link
{
text-decoration: underline;
color: #E77C15;
}
A:visited
{
text-decoration: underline;
color: #E77C15;
}
A:hover
{
text-decoration: underline;
color: #039;
}
A:active
{
text-decoration: underline;
color: #E77C15;
}
I need an image link with no border around it. Right now it has a border of the color from the css around it.
I have tried
<a href='myurl' style="border-style:none; text-decoration:none" >
<img src="myimage.png" style="width: 20px; height: 20px" alt="Remove" title="Remove" />
</a>
but the border still shows.
How can I remove the border around this link image.
Thanks!
You should add the CSS to <img>, not to <a>.
Better use a general CSS rule:
img { border:none }
a img {
border: 0;
}
Use border:none; on the img.
a img{
border:none;
}
Add the following rule to your CSS:
a img {
border: 0;
}
I'd encourage you, or your designer, to look into using CSS Reset Stylesheets.
Place this in your stylesheet:
a img {border:0px;}
The border is around the image, not the link.
Add:
a img {
border: none;
}
Try to add this to your CSS:
a img{
border:none;
}