I searched the web and stackoverflow for this problem, but I didn't seem to find a solution for my problem. I try to make it so when you hover on a list item, there will appear a bottom-border from 0 to 100% opacity. But when I load/reload the page there appears a border under my list item and is removed instantly. Here are a few images to illustrate what I mean:
1) loading/reloading the page (border shown)
2) The border dissapears (it should actually start like this!)
3) When hovered (after the transition is complete)
4) Here is a link to the website I'm currently working on. Chrome version: 22.0.1229.94
Here the html and css I use:
A) HTML
<ul id="menu">
<li>home</li>
<li>contact</li>
<li>find me</li>
<li>downloads</li>
</ul>
B) CSS
#menu li+li:before
{
content: '//';
color:#e27c18;
font-size:1.2em;
margin-right:10px;
}
#menu li a
{
border-bottom:1px solid rgba(226, 124, 24, 0);
-webkit-transition:border-bottom-color 300ms ease-in 200ms;
-moz-transition:border-bottom-color 300ms ease-in 200ms;
-o-transition:border-bottom-color 300ms ease-in 200ms;
transition:border-bottom-color 300ms ease-in 200ms;
}
#menu li a:hover
{
border-bottom:1px solid #e27c18;
border-bottom:1px solid rgba(226, 124, 24, 1);
-webkit-transition:border-bottom 300ms ease-in 200ms;
-moz-transition:border-bottom 300ms ease-in 200ms;
-o-transition:border-bottom 300ms ease-in 200ms;
transition:border-bottom 300ms ease-in 200ms;
}
Now the thing I want is that when you reload or load the page, that there is not a visible border with correct transitions (this is the only way the transitions react correctly).
EDIT: I noticed that only a few people have this problem, wich makes it a lot harder to fix this bug :/.
Related
I discovered CSS transitions this morning on StackOverflow (I'm a newer web developer, mind you.) and I was trying to re-vamp one of the sites that I'm currently building, by adding a nice fade-in effect on my link color changes & my div hover effects on my page. The effect works very nicely, but I'm noticing a weird delay that hopefully someone can help me out with.
The Problem: When I have nested elements that should both receive a transition, they aren't happening simultaneously, they are waiting for the parent transition to stop and then the child transition begins.
HTML: Note - This is razor text normally, but I have provided the raw HTML without any C# syntax
<div class="image-caption">
<h1>Heading</h1>
<p>Hello world, I am an example paragraph.</p>
<a href="#" target="_self">
<div class="image-link">
Link Text!
</div>
</a>
</div>
CSS / LESS:
I was looking for a way to quickly convert all div & link effects on my site to fade smoothly. I found the code below on StackOverflow and noticed that if I didn't include the :hover & :focus selectors, that all of the links on the page would transition from a pretty large size down to their normal size when the page loaded which looked funny.
div, a, i{
&:hover, &:focus {
-o-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}
}
And here is the code for the actual styling of the caption.
.image-caption {
//irrelevant CSS removed here
a {
&:hover, &:focus{
color: rgba(19, 56, 97, 1.0);
.image-link{
border-color: rgba(19, 56, 97, 1.0);
}
}
}
}
Use transition property directly on selectors (not on hover and focus states)
div, a, i {
-o-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}
I was able to make it work by removing the DIV declaration on the global DIV / I / A transition rule, and then creating a couple of mixins to handle independent transition cases like this.
New Global Rule & Mixins:
a, i {
&:hover, &:focus {
-o-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}
}
.no-fade() {
-moz-transition: none;
-o-transition: none;
-webkit-transition: none;
transition: none;
}
.make-fade() {
-o-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}
New CSS / LESS to fade nests at the same time: - (for clarification, .image-link is a DIV)
a {
font-family: 'Source Sans Pro';
color: #FEFEFE;
text-transform: uppercase;
font-size: 18px;
&:hover, &:focus {
color: rgba(19, 56, 97, 1.0);
.no-fade();
.image-link {
.make-fade();
border-color: rgba(19, 56, 97, 1.0);
}
}
I am creating a navigation bar and I am having issues getting the hover's background color to take place of the entire area I want it to be in. I want it to be the entire block of the list item as well as the padding I have created. Right now it is only changing the color of the link's title name.
I created a fiddle to show what is happening.
https://jsfiddle.net/aqdw7mh3/
I have tried adding width: 100%; to:
.spectator_nav li:hover ul {
display: block;
}
and
.spectator_nav li a:hover {
background-color: #282828;
-o-transition:color .4s ease-out, background .3s ease-in;
-ms-transition:color .4s ease-out, background .3s ease-in;
-moz-transition:color .4s ease-out, background .3s ease-in;
-webkit-transition:color .4s ease-out, background .3s ease-in;
/* ...and now for the proper property */
transition:color .4s ease-out, background .3s ease-in;
}
This did nothing to help my case. What am I missing?
Set a to the size of the block. This way, it will fill up the block and the background will too.
Removed/changed some things but hopefully this is what you're after: https://jsfiddle.net/aqdw7mh3/4/
My site address is http://applocity.blogspot.com/
I have a navigation bar (#cssmenu if you want to find it in the source code) and for some odd reason this is occurring: I made it so the links change colors upon hover and that works fine. But I wanted to add a transition so the background-color changes colors by fading in and out. This works fine on Chrome but it only works on the sub-links (e.g. under device and category) on Firefox. I have not been able to figure out why this happens.
#cssmenu a {
background: #999999;
color: #FFF;
-webkit-transition: background 1s ease;
-moz-transition: background 1s ease;
-ms-transition: background 1s ease;
-o-transition: background 1s ease;
transition: background 1s ease;
padding: 0px 25px;
//border-radius: 5px; (NOT ACTIVE)
}
#cssmenu ul li:hover > a {
background: #66FF99;
color: #000000;
-webkit-transition: background-color 0.3s ease;
-moz-transition: background-color 0.3s ease;
-ms-transition:background 0.3s ease;
-o-transition: background-color 0.3s ease;
transition: background-color 0.3s ease;
}
(There is more on the source code of the site--CTRL+F #cssmenu)
What I've tried so far:
Putting background-color instead of background
Using -moz-transition...of course
Re ordering and placing where I put the transition attributes in the CSS code (e.g. under #cssmenu as well as #cssmenu:hover.
I figured it out. Here is the link to my solution. http://jsfiddle.net/mrytF/2/
The problem was coming from lines 59-61. You had this code:
.cssmenu a {
-moz-transition: background 1s ease;
}
When .cssmenu doesn't exist. So I commented this code out, and it works fine now in firefox. I also commented out some CSS that I thought was redundant
Hope this helps
Edit
Fixed the problem with not having the sub-menu show. The main problem here was that you had line 22 as #cssmenu ul li.hover, when it needed to be #cssmenu ul li:hover.
Here is the fiddle
http://jsfiddle.net/mrytF/3/
Been trying to figure out how to create an L shape button using only CSS3. I've managed to do it by mirroring a rectangle to create the shape but I am also trying to implement a hover effect on the button as well. It works only on the main rectangular shape.
Any ideas on how to go around this or possibly a more efficient way of executing this problem.
here's the jsfiddle:
http://jsfiddle.net/kryon17/kpRKA/
Not sure if this is what you needed, but I recreated it using borders. Let me know if this solves your problem.
HTML
CSS
a {
margin:100px;
display:block;
width:50px;
height:50px;
border-bottom: 30px solid black;
border-right: 30px solid black;
}
a:hover {
border-color: #676767;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-ms-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
Source | Demo
I have a DIV that's wrapped in an anchor tag; all of the DIV is clickable, even the whitespace that doesn't contain any text (and this is desired, for my purposes).
I have another anchor tag that's absolutely positioned over this DIV with a higher z-index. This anchor tag wraps an image (a "close" icon).
This all works correctly, EXCEPT that I only want the close icon to appear on hover. As currently implemented, the close icon is always visible. I'm not sure if I'm going about this the right way. As a further wrinkle, I need to implement this without using JavaScript, since I'm running on an embedded system and I can't afford to invoke a JavaScript engine.
This only needs to work with WebKit (even more specifically, it only needs to work with Chrome).
Can someone give me a nudge in the right direction?
Here's the CSS I'm using:
.content {
border-top: 1px solid #eff1f2;
border-bottom: 1px solid #c5c5c5;
padding: 8px 11px;
border-left: 1px solid #c5c5c5;
}
div.content:hover {
background-color: #d1d6de;
}
.close {
position: absolute;
right: 100px;
top: 10px;
z-index: 0;
}
Here's my HTML:
<div>
<a href="native://action1/">
<div class="content">
<p>This is my content</p>
</div>
</a>
<a href="native://action2/">
<img class="close" src="images/close.png"/>
</a>
</div>
Here's a jsFiddle that contains my source.
All you need, given your current HTML, is a simple revision of your CSS:
.close {
display: none; /* Added this to hide the element */
/* other CSS */
}
div:hover a .close { /* to make the element visible while hovering the parent div */
display: block;
}
JS Fiddle demo.
With the use of the CSS transition properties, you can also use fade in/fade out:
.close {
opacity: 0; /* to hide the element */
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
transition: opacity 0.5s linear;
/* other CSS */
}
div:hover a .close {
opacity: 1; /* to reveal the element */
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
transition: opacity 0.5s linear;
}
JS Fiddle demo.
It's also worth noting that, prior to HTML 5, it's invalid to wrap a block-level element inside of an inline-level, the a, element. In HTML 5, though, this seems to be valid (though I've yet to find the W3 documentation to support this).