I'm making a menu with <ul>/<li> and CSS.
Here's what I have so far: https://jsfiddle.net/gANfS/6/
The problem is that if you mouse over the top edge within the 5 pixel margin, it starts getting crazy and going back and forth between the hover and unhovered state because the size of the block grows and shrinks. How can I fix this? When I shrink the li, I don't want to be shrinking the hover area. That would fix it, but I'm not sure how to pull it off. Ideas?
this is a hack job...but it will work
instead of magin-top:5px;
do border-top:5px solid black;
if you want your background to to be a different color, just make sure to set the border color to the same color.
Wrap your li content into a div, then apply your shrinking to that div (.sel div:hover instead of li:hover) and this should make it.
The reason for that is on mouse over, the button moves down and sets a margin-top 5px. Then, if the mouse is over that top edge, the button no longer has "hover" state and it retracts back. When it does get back, it switches to mouse over state and the journey begins again.
You could use padding-top:5px instead of margin-top and set the HOVER effect on the whole container. Padding, as opposed to margin, is space inside the element. That way, when the mouse is over the top edge, it would still be considered as over the element and it will not flicker anymore.
Related
RighteousAlliance.com - two buttons on the right with mouseover effects. (i'll fix their actual position later)
If you adjust the browser width by dragging it you notice how they stay in the same position relative to the background? That's what I want.
But there's something invisible outside the images that are overlapping and ruining the mouseover effect. If you hover vertically over "shop" you notice how it only lights up ABOVE the top part of "Learn" to the right?
What is blocking that?? There's something invisible outside the div. I've tried for 3 days to figure this out.
I can fix that problem by adding "display: inline-block" and something else. BUT THEN IT BREAKS THE ALIGNMENT WITH THE BACKGROUND when you adjust the browser size horizontally. How do I get BOTH to work? Please help. I did it a long time ago but can't figure it out.
Here's a screenshot of the code: https://righteousalliance.com/Images/code.png
I'm animating my navigation links, and scaling them up on hover. Like so:
nav#nav a:hover
color coal
transform scale(1.64)
transform-origin center -109%
This causes the element to move out from under the cursor, reversing the effect, causing it to move back, redoing the hover, stuck in this ugly loop.
How can the hover effect be maintained?
Without actual code I can only give a conceptual answer:
Could you put the item that is animated inside of a div that doesn't change size and apply the hover to that? So you hover over the div it animates the inner object, but the div doesn't move so even after the inner object changes the mouse is still hovering over the div.
I have a Flexbox based nav menu with a logo aligned in the horizontal center of inline links. Every pen or fiddle I tried making of this doesn't replicate what I'm getting for some reason, but you can go to this Flexbox test here which is almost exactly what I'm working from and if you go into an inspector and add an anchor to the main logo image you'll see what I mean.
The way this is set up is the third link has a left margin of auto applied to fill in the extra gap for the logo to fit in. The logo area is separate from the nav menu in the markup but flexbox layout puts them all in line with each other (at lower breakpoints the nav menu moves down).
Now this all works fine and good until you decide to make the logo a clickable link. When you do that, the margin from that third link obscures the hover state of the logo.
Here's a visual example:
So if you tried hovering over the logo where the margin area intersects it, you would not be able to click the logo, nor get a pointer cursor or any hover states (like a background change). Outside of the margin while over the logo, it works fine, but to a user, they're going to think something strange is going on. This happens if the logo is an img (as it is in the original example) or an SVG (as I'm trying to use).
Trying to see if there's a way around this without having to completely nuke my Flexbox layout. My markup is very similar to what is being used in that example. I've tried toying with a higher z-index for the logo compared to the nav, which didn't work. Giving the nav a negative z-index lets you click the logo but then you can't click the nav items.
You can add a relative position to the logo and then play around with the z-index to make the logo the first element.
.logo {
position: relative;
z-index: 1;
}
I am having a bit of trouble styling a navigation menu where you can select packages.
This is going to be a nav menu for a mobile website.
The active green li tab I need to be evenly spaced across the full with of the ul
My problem is when I click on the tab to make it active the green doesnt fill up all the li and blue is still visible.
Secondly on the green active tab li I need to display a down arrow at the bottom center of the active tab.
I have included a fiddle with it more or less done, just need help with styling it to finish it off.
http://jsfiddle.net/8C3U3/
<ul id="navlist">
<li>Basic</li>
<li class="spacer"><a class="m-active"href='#'>Standard</a></li>
<li><a class="m-active"href='#'>Premium</a></li>
</ul>
I. Why does the blue still display?
The blue still displays for a few reasons. I'll go through each of them.
The first reason is that you've given your lis padding and a blue background color. Yet you assign the green background color to your as. Since the a is contained within the li, and the li has padding, the a couldn't possibly extend the full dimensions of the li and cover up the blue. View this JSFiddle, where that problem is corrected.
The second reason is that your lis are set to be inline elements. Inline elements interpret all whitespace in your code (spacebar spaces, new lines, etc.) as a single space between the elements. To get rid of that spacing, get rid of the whitespace between the elements in the code itself. View that here.
Unsolved questions: You'll see that there's still blue visible. This is because borders are rendered outside of the element, and this border doesn't extend the whole height of your li (let alone the ul, which also has a blue background set). You'll need to figure out how to handle this. One option is that you could use :before and :after pseudoelement so that the spacing between the elements is closed.
II. Making an arrow beneath the active tab
The way I usually make arrows is with an :after pseudoelement. Here are the steps:
We want to position the arrow as we want, which is best done by setting it to position: absolute;. To make it relative to the parent, we need to explicitly define the position on the parent. So let's go with position: relative;, as that won't change the location of the parent. Now we can move the arrow around wherever we want!
Let's set the pseudoelement to be display: block; and give it empty content. This makes it display as we want it to.
You can either use the border hack to create the triangle, or use the unicode triangle down character. I chose to use that in this JSFiddle.
Unsolved questions: Right now, your lis aren't the same width. This means that no single line of CSS code could center the triangles for all of the lis. You either need to set the lis to be the same width, then position the triangle, or target each li individually and manually place the triangle based on the width. I suggest the former of these two possibilities.
III. How I'd Do It
And here's how I'd make the menu, with most of the issues above resolved. Maybe this will be a place for you to work from.
If you're not planning on fading the arrow in, then you might prefer to use the border hack to create the triangle, which has deeper browser support.
I have two different elements (div class="") within a larger container.
Let's call them div class="overlay_container" and div class="title." The div class="overlay_container" has a subclass, .image, which creates an overlay over the entire larger container on hover.
The div class="title" has a z-index of 10,000 and lies over .image and therefore over the overlay. Unfortunately, when you hover over "title," the subclass overlay image underneath disappears.
I know the problem is obviously that the "title" div is right over the other divs and therefore the on hover will disappear due to the z-index. But how do I fix this? How do I make it so that when you hover over the "title," the .image overlay still appears?
If your answer involves jQuery, could you please tell me where to put the script (before the /head tag)? Thanks!
Adding pointer-events:none; to the title div might work?
Looks like most browsers recognise it, except for....dun dun dun...IE: http://caniuse.com/#search=pointer-events