I am trying to make my css a:links only affect the body. When I add my CSS it affects all links including my menu and logo. Is there a way to do that?
Thanks
a:link {
text-decoration: none;
background-image: linear-gradient(to bottom, #FEF5DF 0%, #FEF5DF 100%);
background-repeat: no-repeat;
background-size: 100% 0;
background-position: 0 111%;
transition: background-size .25s ease-in;
padding: 2px 2px 0px 0;
border-bottom: 2px solid #E2DDCA;
transition: all 0.3s;
}
a:hover {
background-size: 100% 88%;
cursor: pointer;
border-bottom: 2px solid #f8cd5f;
transition: background-size .25s ease-in;
}
Everything on your html page is contained within the body tag, so if you style your links, they're going to affect those links everywhere.
If you just want to style the links in a specific block, wrap that block in a div, give it a class, and then target a links within that class.
<body>
<div class="my-content">
My Link
</div>
<div class="everything-else">
My Link
</div>
</body>
CSS:
.my-content a:link { ...styles here...}
.my-content a:hover { ...styles here...}
Add a class to specific links you want to affect and then add the CSS to that class as follows:
HTML
link 1
link 2
link 3
And then your CSS would be as follows:
.mylink{
/*your css*/
}
Related
I've noticed an unanticipated effect of using CSS color transitions on an image with a transparent background. Here's an example:
:root {
--size: 4em;
--duration: 5s;
}
html, body {
margin: 0;
background: slategray;
color: white;
}
.main-menu {
overflow: hidden;
background: black;
}
.main-menu *:hover {
background: skyblue;
-webkit-transition-duration: 5s;
transition-duration: var(--duration);
}
.image-div {
float: right;
padding: calc(var(--size) / 2);
-webkit-transition-duration: 5s;
transition-duration: var(--duration);
}
.image {
max-width: var(--size);
}
<div class="main-menu">
<div class="image-div">
<img class="image" src="https://s4.postimg.org/5zy6kjqcd/maximize.png"/>
</div>
</div>
To summarize, the issue is this. If you hover over the image-div div's padding, the background color of this div and the contained image div execute the color transition at the same rate, as expected. However, if you hover over the image div, its color appears to transition slightly faster than the image-div div's color.
Given the fact that I was able to reproduce this exact behavior on Firefox, Chrome, Safari and Edge, I get the feeling that this is expected behavior, but I would like to understand why it is happening.
When you hover over the img two hover events are triggered - one on the img and one on its parent image-div when you use * in .main-menu *:hover selector:
Instead use the hover only on the image-div as below:
.main-menu .image-div:hover {
background: skyblue;
}
and now the difference in transition will not be there - see demo below:
html, body {
margin: 0;
background: slategray;
color: white;
}
.main-menu {
overflow: hidden;
background: black;
}
.main-menu .image-div:hover {
background: skyblue;
}
.image-div {
float: right;
padding: calc(4em / 2);
-webkit-transition-duration: 5s;
transition-duration: 5s;
}
.image {
max-width: 4em;
}
<div class="main-menu">
<div class="image-div">
<img class="image" src="https://s4.postimg.org/5zy6kjqcd/maximize.png"/>
</div>
</div>
Given the fact that I was able to reproduce this exact behavior on
Firefox, Chrome, Safari and Edge, I get the feeling that this is
expected behavior, but I would like to understand why it is happening.
The reason this happens is because the img transition picks up the image-div transitioned color, hence get lighter faster.
Simply put, the image-div goes from a solid black, while the img goes from black that turns into sky blue.
Additionally, since you move the mouse over the image-div before it gets to the img, the transition starts before, though the delay is based on how fast you move the mouse to the img
I'm experiencing an issue with the css transitions firing on page load. Basically there were a problem with fancy links with custom background dropping from the top(start position) on the page load.
You can see example here.
These problems only occur if there is both input and a tags on the page so if we remove input everything will be just fine. The other way to solve this problem is not to use an external css file: it works fine with jsbin, but it isn't really helps because I want to understand why this things could ever be happening.
I have the following code:
HTML:
<head>
<link rel="stylesheet" type="text/css" href="signin.css">
<title>Dobrotech</title>
</head>
<body>
<input type="password" name="password" required=""/>
forgot password?
</body>
CSS:
a{
padding: 0 0 5px 0;
background: url(/dobro.tech/images/link.jpg) repeat-x bottom;
background-size: 70% 5px;
text-decoration: none;
}
a:hover {
background: url(/dobro.tech/images/activelink.jpg) repeat-x bottom;
background-size: 70% 12px;
}
a {
transition: background-size 0.5s ease-in, background 0.5s ease-in;
}
a:hover {
transition: background-size 0.1s linear, background 0.1s linear;
}
UPDATE: I've decided to remake this link effect using ::before pseudoclass and the problem is gone but I still want to figure out what cause links and inputs interact that weirdely
try this
a{
padding: 0 0 5px 0;
background: url(dobro.tech/images/link.jpg) repeat-x bottom;
background-size: 70% 5px;
text-decoration: none;
}
a:hover {
background: url(dobro.tech/images/activelink.jpg) repeat-x bottom;
background-size: 70% 12px;
}
i remove first / from background url
download my sample
I am working on a webpage and I want to put a button on a transparent div that shows the background image. But when I place the button it is also transparent. How can I make it not transparent?
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
<input type="button" value="Ok">
</div>
</div>
Use the rgba() color method instead of opacity:
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: rgba(255, 255, 255, 0.6);
border: 1px solid black;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
<input type="button" value="Ok">
</div>
</div>
With opacity, the effect applies to the entire element, including child elements and content.
From MDN:
[Opacity] applies to the element as a whole, including its contents,
even though the value is not inherited by child elements. Thus, an
element and its contained children all have the same opacity relative
to the element's background, even if the element and its children have
different opacities relative to one another.
The exception to this rule is background-color set with rgba().
The rgba() color model allows for the opacity to be set via the alpha channel.
So you could set the parent to div { background-color: rgba (255, 255, 255, 0.6); }, and that would set the opacity to 0.6 on the background-color alone. Child elements would be unaffected.
Learn more here: A brief introduction to Opacity and RGBA
For opacity and images see:
Can I set an opacity only to the background image of a div?
CSS: set background image with opacity?
I'm having issues getting my image to transition when hovered over, I believe the issue is with the css .play_button a:hover
when changed to #play_button a:hover it will transition however -webkit-transition no longer works.
Here's my current code: http://jsbin.com/vesuravabu/edit?html,css,output
Thanks for your help.
edit: added the transition to the example that I was trying to use.
This question is now answered, thank you everyone who replied.
I changed it from ".play_button a:hover" to "#play_button a:hover"
I also found the issue with my transition, accidentally used a semi-colon after -webkit-transition
Problem:
You don't have any class which is called play_button(.play_button). You can change .play_button to #play_button to solve your problem.
Jsbin
#play_button a {
background: url(http://placehold.it/119x69) repeat-y;
background-size: 100%;
padding: 0 36px;
width: 119px;
height: 69px;
display: block;
cursor: pointer;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
#play_button a:hover {
background: url(http://placehold.it/200x150);
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="sidebar_item">
<div id="play_button">
</div>
</div>
</body>
</html>
You definitely need to be using #play_button a:hover as opposed to .play_button a:hover, because play_button is an id, not a class name.
I don't see any -webkit-transition statements in your example, how are you trying to use this? It's not possible to transition, using CSS transitions, from one image to another in this manner. However, you could accomplish this a slightly different way: have a second DOM element overlaid on top of the first, set to opacity: 0 with the hover image already applied to this top element. Then, transition the opacity to 1 when hovering. This may give the effect you're looking for.
EDIT: Now that you've added a transition, we can fix that too. Note that in your example, "webkit" is misspelled, but the main problem is that you didn't specify the new width and height to transition to. Give this a try:
#play_button a
{
background: url(http://placehold.it/119x69) repeat-y;
background-size: 100%;
padding: 0 36px;
width: 119px;
height: 69px;
display: block;
cursor: pointer;
transition: 0.2s; /* Don't need webkit prefix here for modern browsers */
box-sizing: border-box; /* Tell browser: Don't include padding in size calculations */
}
#play_button a:hover
{
background: url(http://placehold.it/200x150); /* This will snap, not transition */
width: 200px; /* New width & height, will be used for transition */
height: 150px;
}
I am using css to make an underline come under a span:
CSS:
.un{
text-decoration:none;
transition: all .5s ease-in;
}
.un:hover{
text-decoration:underline;
}
HTML:
<span class="un"> Underlined Text - Or to be underlined </span>
The underline simply appears, it doesn't move in over .5 seconds, like the transition should apply. Why not? How can I make this work?
Updated for 2021:
The support for text-decoration-color has come a long way, and common browser support requirements have loosened making it a viable option for most new projects. If you are only seeking a color transition, and can do without IE support, see this answer below.
Original answer:
You cannot change the color of the text-decoration independent of the color. However, you can achieve a similar effect with pseudo elements:
.un {
display: inline-block;
}
.un::after {
content: '';
width: 0px;
height: 1px;
display: block;
background: black;
transition: 300ms;
}
.un:hover::after {
width: 100%;
}
<span class="un">Underlined Text - Or to be underlined</span>
That is the most customizable way to do it, you can get all sorts of transitions. (Try playing around with the margins/alignment. You can make some awesome effects without adding to your HTML)
But if you just want a simple underline, use a border:
.un {
transition: 300ms;
border-bottom: 1px solid transparent;
}
.un:hover {
border-color: black;
}
<span class="un"> Underlined Text - Or to be underlined </span>
A proper solution that will work with multiple line text and doesn't require border-bottom mockup should look like this. It utilizes text-decoration-color property.
Have in mind that it's not supported by old browsers
.underlined-text{
text-decoration: underline;
text-decoration-color: transparent;
transition: 1s;
/*add those for opera and mozilla support*/
-webkit-text-decoration-color: transparent;
-moz-text-decoration-color: transparent;
}
.underlined-text:hover{
text-decoration-color: red;
/*add those for opera and mozilla support*/
-webkit-text-decoration-color: red;
-moz-text-decoration-color: red;
}
<span class="underlined-text">You're the greatest thing that has ever been or ever will be. You're special. You're so very special. It is a lot of fun. You don't want to kill all your dark areas they are very important. In your world you can create anything you desire.</span>
I had a similar issue with a tags and I figured it out.
The reason it's not animating is because you cannot transition from a text-decoration: none value.
In my case, what I did was set text-decoration-color to transparent and then, on :hover, set the text-decoration-color to the color value I wanted.
In your particular case, you would have to specifiy text-decoration: underline transparent since span tags have an initial text-decoration value of none. Then, on :hover, specify the text-decoration-color that you want.
FWIW, text-decoration and text-decoration-color are animatable properties, according to MDN.
References:
Animatable CSS Properties - MDN
The answer of #Jacob is pretty neat. But I accidentally found a solution no one have provided:
.un {
transition: .4s;
}
.un:hover {
box-shadow: 0 3px 0 #7f7f7f;
}
<span class="un"> Underlined Text - Or to be underlined </span>
Use box-shadow with no blur can achieve underline effects even more tricky and special.
This can make your page run slower if you use a lot of it.
You can use border-bottom instead, like so:
.un{
border-bottom: 1px solid transparent;
transition: all .5s ease-in;
}
.un:hover{
border-bottom: 1px solid black;
}
<span class="un"> Underlined Text - Or to be underlined </span>
Here is a workaround to add fade animation to the underline property:
.un{
text-decoration: underline;
text-decoration-color: #0000;
transition: .2s;
}
.un:hover{
text-decoration-color: #000;
}
Because text-decoration is an all-or-nothing property, you’ll probably want to try using a border-bottom instead. This is how I’ve done it previously:
.un {
border-bottom: 1px solid transparent;
transition: border-color 0.5s ease-in;
}
.un:hover {
border-color: black; /* use whatever color matches your text */
}
Text that is <span class="un">wrapped in the “un” class</span> has a border-bottom that appears as an underline that fades in.
Applying the transition to the border color change from transparent to your text color should give the appearance of a “fade in” from no underline to underline.
If you want an underline with increasing width like below, you can use background-image instead.
.un {
display: inline;
background-image: linear-gradient(#e876f5, #e876f5);
/* ↓ height of underline */
background-size: 0% 2px;
/* ↓ y position of underline. you can change as 50% to see it. */
background-position: 0% 100%;
background-repeat: no-repeat;
transition: background 0.3s linear;
}
.un:hover {
background-size: 100% 2px;
}
<span class="un">hover me</span>
I found this solution to work best, clean and simple. The transition works once you specify a color.
#ref: https://www.w3schools.com/cssref/css3_pr_text-decoration-line.asp
a {
color: #222;
-webkit-text-decoration: none transparent;
text-decoration: none transparent;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
a:focus,
a:hover {
color: #222;
-webkit-text-decoration: underline #222;
text-decoration: underline #222;
}
This is how I moved the border up closer.
<style type="text/css">
a {
text-decoration: none;
border-bottom: solid 1px transparent;
font-weight: 600;
color: rgb(126,93,142);
-webkit-transition: all .5s;
transition: all .5s;
display: inline-block;
line-height: 1em;
}
a:hover {
text-decoration: none;
border-bottom: solid 1px;
color: #ce40ce;
display: inline-block;
line-height: 1em;
}</style>
La La La