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.
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
I'm not super super great with html but I've been able to make my way into some coding and so far, this is the only issue I can't understand nor fix.
I have one big image but under the image are text boxes, links, and other images. I can get the image to where if I hover my mouse over it, I can see the stuff under it perfectly, but I can't scroll textboxes nor can I click my links.
I tried setting the z-index to -9 but which works...if I keep my mouse still. (Pointless.) If i move my mouse, the image flickers with ever movement. Any fixes? Here is the issue. I apologize for the messy code.
#aesth {
position:fixed;
top:150px;
left:90px;
width:432px;
height:600px;
background: url('https://38.media.tumblr.com/5f5348ef9ed5ca32ffb42a153032b6d3/tumblr_n83taak4Bj1tvcp5qo1_500.png'), #fff;
z-index:9;
}
#aesth:hover {
z-index:-9;
opacity: 0;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
The hover problem was faced due to the z-index=-9 given in the
#aesth:hover {
z-index:-9;
opacity: 0;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
Just Remove the z-index inside the #aesth:hover it work fine
The problem there is that when you hover the image, it fades and goes behind. When it goes behind, it comes back to the initial state because it is not hovered this time but the other content.
Trying targeting the parent on hover then apply the effect to the image. This way the hover effect remains because the target is not moved away from the mouse pointer.
parent:hover > #aesth{
z-index:-9;
opacity: 0;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
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;}
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 would like to animate an <a> tag so when in :active state it will move to the right and when going back to regular state it would animate back to the left.
Currently it is animating on click but when I leave the mouse button it jumps back with no animation, how can I reverse the animation?
Here is a simple example, please note that i have to use position:relative;left:20px since in the real app this code is inside an absolutely positioned element and for some reason, using margin causing unexpected behaviour.
Just use left: 0; for a and use position: relative; in a rather than a:active
Demo
CSS
a {
display: block;
background: red;
-webkit-transition: left .2s ease-in,margin .2s ease-in;
-moz-transition: left .2s ease-in,margin .2s ease-in;
transition: left .2s ease-in,margin .2s ease-in;
left: 0;
position: relative;
}
Just a suggestion, moving links on click will annoy the visitors, why not use it on hover
Demo
If your live code is like the example, you just need to put position:relative; and left: 0px; on the a {} rule too.
What is happening is when you stop hovering/release click, it loses the position: relative, because it isn't on the current class. Without the position rule, the left rule is ignored.