Good day! I have run into a problem with my list of items.
This is what happens with all of my items that are more than 1 line long. I use this CSS to achieve the effect:
.listas:hover{
color:black;
font-size: 20;
text-decoration:none;
transition: all .1s ease;
}
It seems to me like it is occuring when the mouse cursor appears in-between the lines which makes the :hover property stop working. Is there a way around this? Thank you for any kind of help :)
EDIT: #Toby has helped me fix the issue.
adding display: inline-block; in .listas:hover{} fixed my problem!
Thank you very much.
Related
I need some expert advice on this as its driving me crazy!!
I have checked through everything and even removed all CSS but I can’t stop this from happening!
In the footer of this website - www.thedevelopists.co.uk, the links are moving downwards about 1px on hover. The crazy thing is though that they don’t bounce back up when you leave, they remain 1px down. Also, to see this error/bug, you have to be scrolled right to the bottom of the page??
If somebody could figure this out I will be so happy!!
P.S This is affected the most in Firefox. In Chrome it behaves a little differently, rather than moving slightly the curser hand flickers like crazy.
It's quit simple. Just put below code in your css.
footer li {
display: inline-block;
width: 100%;
}
This is happen because your li is not clear. There for it happen. Cheers!!!
Try this code as you feel footer Links Jittering/Moving on Hover is due to transition effect
If do not need that
footer a { transition: none; }
This problem is only with chrome.
http://jsfiddle.net/3ew5o6as/
Basically, when you hover the .tile, it should show the .caption below. It works out fine, but it wont return to its original state as it should. If you look closely, it shows about 1-2 pixels after mouseout.
What I seemed to have noticed is that the problem disappears whenever I remove the translate:transform on the .wrap or whenever I remove the line-height:50px on .caption
Any suggestions?
For different zoom levels, sometimes the values of transform and absolute positioning don't quite match up. To fix this, you can just add a 1px 'margin of error' to the bottom:
.tile .caption {
...
bottom: -51px;
....
}
See fiddle:
http://jsfiddle.net/jeremyblalock/3ew5o6as/1/
I know that you can make hovering over a div affect the div directly after it with '+' and any div after it with '~'. But I have a situation where I need a div directly before and after the div I'm hovering over to be affected. What I am trying to do is have 4 circles grow on hover (which works fine), and the adjacent circles should be pushed aside.
Here is a codepen that may make it more apparent what I am trying to do:
http://codepen.io/anon/pen/Bojug
Here is a snippet of code with the issue.
#circ2:hover + #circ3{
margin: 100px 0px 100px 8%;
}
#circ2:hover ~ #circ1{
margin: 100px 2% 100px 13%;
background: blue;
}
As you can see, when you hover over circle number 2, circle number 3 is pushed aside but circle number 1 is not. Does anyone have a way around this. I know some of you may suggest JS or JQuery which I am not familiar with. In that case could you point me in the right direction? Also, I know there are many threads that address similar issues but I havent seen one that asks about affecting preceding divs. Thanks in advance!
From what I understood from your question I think you want to shift the preceding elements like the post elements.
If I am correct, just use the simple technique .Shift parent relatively on hover - >
#circles:hover{
position:relative;
right:40px;
}
Demo
Update with transition
#circles{
position:relative;
right:0px;
}
#circles:hover{
position:relative;
right:40px;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
Demo 2
I'm too lazy to change youre code, since it's quite big, but the following idea should help:
You have
#circ2:hover + #circ3 //Affects circ3, when circ2 is hoverd
Now you want to affect #circ1, when circ2 is hoverd.
Try this:
#circ1 //Set the rules you want to see applied when circ2 IS hovered
#circ1 + :not(:hover) //Set the standard style here.
That way, since #circ2 isn't ususally hovered, you see the standard style. But as soon as you hover over it, the :not()-selector will no longer apply - and the hover styles will apply.
As demonstrated here, I've built a fixed menu using unordered lists and a lot of css. I've also included a button with a custom class that redirects back to the frontpage and made it a litter bigger using font-size: 130%. By using line-height: 0; I was able to force all buttons to be the same height. Unfortunately, somehow an extra pixel of height is added to the menu and the big button sticks to the top, while the rest of the buttons stick to the bottom. Apart from seriously triggering OCD, it looks plain ugly when hovering, so I'd like to fix it. I am at a dead end and cannot solve this by myself, so I would like to ask anyone to help me out.
Thanks in advance!
li.menu-titel {
font-size: 130%;
font-weight: lighter;
overflow:hidden;
line-height: 0;
}
Simple format all your li with display:inline-block (instead of inline),
or remove the vertical-align:top;.
I am having a very weird problem. I do a css 3 cardflip animation for my portfolio. In Firefox everything works fine, but in chrome for some reason the first card has a wrong direction for the animation. As you can see, the left image shows the wrong animation, stretched wrong, while the right one is perfect. All the cards are created by a script so there can not be a difference in the html markup or the css for that matter.
Any Ideas? What kind of information can I provide to help figure this out?
Cheers Lukas
Update
.card flip
{
text-decoration: none;
text-align: center;
float: left;
position: relative;
display: block;
z-index: 30;
}
Remove perspective and webkit-perspective they causing error