Hover state in table with border shifting link only in Firefox - html

I know this type of question has been asked in some way shape or form on here but i cannot get this to work no matter what. Screenshot included as well the CSS. When you hover on the row, the left border highlights it. It's moving the link over 1px. I tried compensating with negative margin but no luck ( just to test it). It's only Firefox where this is happening.
%zebra-row {
transition: background-color .1s ease-out;
background-clip:padding-box;
&:nth-child(odd ) {
background-color: $alabaster;
}
&:hover {
background-color: $gallery;
border-left:2px solid $aqua-forest;
}
}

It is because the border is being applied and moving it over (as I'm sure you've assumed).
To get around this, you'll want to have a default border present but make it transparent. On the hover, you'll simply color the border.
%zebra-row {
transition: background-color .1s ease-out;
background-clip:padding-box;
border-left:2px solid transparent; /* Set the transparent border */
&:nth-child(odd ) {
background-color: $alabaster;
}
&:hover {
background-color: $gallery;
border-left-color:$aqua-forest; /* Color it on hover */
}
}
This prevents the "jump" you were talking about because the border is, essentially, always there.

Related

How to give an animation to the image when mouse cursor goes out of the hover area?

Using hover with transition ease-in for an image, taking cursor out of the image makes it unpleasant
i've tried :after ,but i'm not sure if thats what i need, if it is , i didn't figure it out (i'm a noob)
this is the code i'm using for hovering
.movies img:hover
{
border: 7px solid white;
padding: 0px;
width: 230px;
transition: all 0.1s ease-in;
}
How to add a transition(or something else to smooth it)to make the new border created by the hover disappear with a transtion ?
I guess you can smooth it (as you named it) by throwing out
transition: all 0.1s ease-in;
to your .movies img class, but I'm not sure if that's the solution you're looking for.
Have you got a codepen project for this problem?

What is causing this CSS Transition delay, specifically with colours in Chrome?

Using CSS transitions on most properties runs as expected, except this issue I am having with colours.
I have set up a demonstration pen here.
When transitions are instructed to change the color property, they all queue after each other instead of happening all at once.
This seems limited to webkit as IE and Firefox work as expected.
#change {
color: green;
transition: color 200ms linear;
}
.changed {
color: red;
}
I think it's because color is inherited property, and you use * selector for transition. You should set transition: color only to element you change color, for example (http://codepen.io/sergdenisov/pen/QbjjjP):
#container {
padding: 0;
transition: color 500ms;
}
#container * {
transition: margin 500ms;
}

Hover Colour making Headers unreadable

I'm trying to achieve an effect like on this website, http://www.trask-industries.com/#/media, when the content is hovered over it a yellow colour consumes it and the colour of the header changes. When I attempted to re-create this effect my headers become unreadable. jsfiddle.net/m8Z25
.content1:hover, .content2:hover, .content3:hover, .content4:hover, .content5:hover, .content6:hover
{
background-color: white;
opacity: 0.30;
transition: .2s;
webkit-transition: .2s;
-webkit-transition: all 500ms ease;
}
h1:hover
{
color: black;
}
h2
{
color: red;
position:absolute;
bottom: -10;
padding-left: 30;
}
h1
{
color: black;
}
it is not 100% clear what you are trying to achieve here...
From what I can tell. it becomes nearly un-readable because you are adding opacity to the content container. This affects all content (including the background) so everything get faded.
It depends what you have behind the content containers (your sites background).
The site you demo-ed does not use the opacity to change anything. I imagine it just changes the background colour from a lighter purple to darker purple
try removing the opacity:0.30; and updating the background/text colours instead.
see This jsFiddle for an example of just changing colours vs using opacity...

Modify parent element style

My blog simulates a terminal screen, so normal text is green and links are in red with a red background when the mouse is over. Since I use a monospaced font throughout the blog, <code> is styled to have a green background to differentiate from regular text. Likewise, <code> inside <a> has a red background that turns darker when the mouse is over. See this test page for a live version.
Here is the CSS (complete file here) for <a> tags:
a {
color:#CD0000;
text-decoration:none;
transition: background-color .6s;
-webkit-transition: background-color .6s; /* Safari and Chrome */
-moz-transition: background-color .6s; /* Firefox 4 */
-o-transition: background-color .6s; /* Opera */
}
a:hover {
background-color:#440000;
}
And for <code> tags inside <a> tags:
a code {
/* Only apply this to code that is a hyperlink */
color: #161616;
background-color: #CD0000;
border-radius: 5px;
padding: 0 2px 0px 2px;
text-decoration:none;
transition: background-color .6s;
-webkit-transition: background-color .6s; /* Safari and Chrome */
-moz-transition: background-color .6s; /* Firefox 4 */
-o-transition: background-color .6s; /* Opera */
}
a code:hover {
background-color:#440000;
border-radius: 5px;
padding: 0 2px 0px 2px;
}
The problem is that when I mouse over a link such as <a href='#'><code>long code</code></a>, the backgrounds of both the <code> and the <a> tags are transformed. Here are two images that illustrate this. In the first image, I managed to put the pointer of the mouse only over the <a> element. In the second, the mouse is over the <code> element:
Is there a way to style <code> links differently from normal links? Thank you in advance.
I think you're looking for the contains() selector, which is no longer part of the css3 selector spec
To achieve this, you will want to look at either a js framework solution, like has() in jquery or a dynamic css solution, such as less

Keep Transition effect after removing the cursor

I need to change the background-color from red to transparent.
This change should occur when I hover over a div.
The reason is why I need it transparent is so I can show an absolute positioned div under the main div, in other words, when I hover over the parent div, I need to show the child div.
When I move away the cursor from this div, I don't want a reverse-transition, I want the background to stay transparent, I want the blue div to always be there after I move away the cursor.
Since I need a PURE CSS solution (No JS/JQuery), I came into the CSS3 Transition.
<div id="parent">
<div id="child">
</div>
</div>
This is a fiddle (Firefox).
#parent
{
background:red;
-moz-transition:background 1s;
}
#parent:hover
{
background:transparent;
}
I thought about doing this with animation, since I can fake this by giving it a temporary duration to stay transparent, for example.
0% {background:red;}
1% {background:transparent;}
100% {background:transparent;}
But then animation will stop when I move the cursor away.
Note: This may sound ridiculous or stupid, but my intention is bigger than this, this is just one small example.
Take a look at the transition-delay property.
#parent { transition-delay:999999s; }
#parent:hover { transition-delay:0s; }
Fiddle
This way, the hover animation will happen instantly (0s) while the transition to the initial state will only happen after 277 hours without leaving the page. You can increase the value a bit further if necessary, though I believe this value is enough for a real world page. =]
I don't think it's possible with pure CSS. As a compromise you can use JavaScript to add a class to the element and then handle all visuals with CSS.
http://jsfiddle.net/ZvcgP/1/
HTML
<div class="effect">Hover me</div>
CSS
.effect {
background-color: red;
-webkit-transition:background 1s;
transition:background 1s;
}
.effect.anim-done {
background-color: transparent;
}
JS
$('.effect').mouseenter(function () {
$(this).addClass('anim-done');
});
use below code to transiton from red to transparent. and please change 'object' to the class of your object
.object {
background-color: red;
-webkit-transition:background-color 1s linear; /* for webkit supported browsers */
-moz-transition:background-color 1s linear; /* for old mozilla browsers */
-o-transition:background-color 1s linear; /* for opera browsers */
transition:background-color 1s linear; /* for css3 supported browsers */
}
.object:hover {
background-color: transparent;
}