My navigation/menu bar doesn't show unless I hover over it. I want to know how to disable this so as the navigation/menu bar is always displayed. (This is for my tumblr layout http://buubbleguum.tumblr.com/ )
Here is the code:
#navi
{width:125px;
margin-left:180px;
opacity:1;
-webkit-transition: opacity 1s linear;-webkit-transition: all 1s ease-out;-moz-transition: all 1.s ease-out;transition: all 1s ease-out;}
#nav:hover #navi
{margin-left:10px;}
Thank you!
Remove the Margin Left and the webkit transition (because no transition is required if you don't have a margin left)
The below code should work
#navi{
width:125px;
opacity:1;
}
#nav:hover #navi
{margin-left:10px;}
What you want to do is place the menu at its "final" position as it is after the hover effect takes place.
Change your css to:
{width:125px; margin-left:10px; opacity:1;}
Related
I'm having difficulties with a drop down menu I created. If I go to any of the main list items and move my mouse away, the main list item goes back to its native state.
I created a fiddle for it https://jsfiddle.net/7wmqdxv1/ to show what is going on.
The list items that are going back to black are:
<li>Manage
<li>Reports
etc.
I want the main list item to remain white when you move your mouse down the drop down list that displays. I have changed the list's hover color to white, everything, but I cannot get this to work.
Any ideas?
If I understand you correctly, you would have to move the hover statement from the a to the li
.signInBar li:hover a {
color: #ffffff;
}
.signInBar li:hover a{
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;
}
JSfiddle Demo
In your CSS, you have the following rule:
.signInBar li a:hover {
color: #ffffff;
}
Change the selector to the following, and it will work. (demo)
.signInBar li:hover > a {
color: #ffffff;
}
The sub-menu items are children of the li, but not of the a, so when you hover on the sub-menu items, you are no longer hovering on the a item, but you are still hovering on the li. The direct descendent selector (>) is used here to make sure the rule is only applied to the same scope that it was applied to before, but could be removed if you want that rule to apply to all links that are children of the main navigation li entry.
change following code into your css
.signInBar li:hover a {
color: #ffffff;
}
instead of
.signInBar li a:hover {
color: #ffffff;
}
when you are hovering onto drop-down list your cursor comes out of
your <a> tag. that is the reason you need to put :hover state to
<li> tag
Here's a jsfiddle of the project I'm working on
http://jsfiddle.net/bhbLa/
I have a picture that is set to grayscale using some CSS, with some text positioned over the image. When the image is hovered over, it turns the grayscale off and hides the text. It's almost exactly what I want.
The problem I'm having is that if you scroll over the very center of the image where the opacity:0; text is, it isn't considered as hovering over the image, which turns the image back to grayscale.
I've racked my brain all day for this, and I don't know why
div.text:hover #cell {
opacity:1;
}
doesn't correct this problem.
If I am understanding correctly, you need to target the hover effect on the image's parent and not the image itself.
What your old selector was doing was only targeting the hover effect if the cursor is over the image. Well when you are hovering over the text, which is a block level element, you are actually no longer hovering over the img element and therefor will lose it's hover effect.
Here is the css I changed:
div.cell:hover img {
filter: none;
-webkit-filter: grayscale(0);
transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-webkit-transition: opacity .2s ease-in-out;
opacity:1.0;
}
Finally, a fiddle: Demo
I am asking a specific question about a specific problem that I don't know how to do but would like to add to my site.
1) When the parent li has a child, I want that nav to stayed hovered with the effect applied when going through the child elements. Right now, when I am no longer hovered over it, it will lose its hover effect and apply hover effects on the child elements when I want the parent li to still have the hovered effect when going through the sub navigation.
2)And the other thing I do not know how to do is transition effect when I hover over any navigation links, it will sort of have an fade in out effect when hovered in and out from. How do I do this?
I attempted to do this:
CSS:
#nav li:hover > ul{ /*display sub menus when hovered over*/
left:0; /*show menu when hovered*/
z-index:100; /*places the sub nav in frontier of all elements*/
transition: all 2.4s ease-in-out -2s; /*transition: property duration timing-function delay;*/
-moz-transition: all 2.4s ease-in-out -2s;
-webkit-transition: all 2.4s ease-in-out -2s;
}
It brought about unexpected, but cool results of bringing out the submenus, sliding to the right. It's not what I intended, but okay. I just wanted the other two features applied but don't where to look. My full code is here: jsfiddle nav code
Show DEMO Transition
#nav a:hover{
transition: ease-in-out all .4s;
-moz-transition: ease-in-out all .4s;
-webkit-transition: ease-in-out all .4s;
background-color:#000000;
color:#FFFE41;
text-decoration:none;
font-weight:bold;
}
I edited your code, changing left property to opacity and adding one more transition. Take a look: http://jsfiddle.net/YfuDT/
About part 1 of your question, I am afraid you won't achieve it with css, some javascript necessary.
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;
}
I have implemented the nivo slider (with default theme) successfully except for one issue.
The left arrow on the slider is showing a small part of the right arrow. The right arrow on the other hand is being displayed correctly.
How come the left side of the sprite is not rendered properly but the right one is?
Arrow picture
The only place where the arrow.png picture is declared is in the next css section:
.theme-default .nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(../Images/slider/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
opacity: 0;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
Thanks.
If you look right below that class in the nivo-slider css you will notice some classes called a.nivo-nextNav and a.nivo-prevNav which are applying a background position.
The left property on a.nivo-prevNav must be wrong for the distribution of the plugin you have. If you adjust that to say 11px (you will have to play with it, to get it just right) it will fix your problem.