i'm working On a website for a client, and I've hit a snag. I don't quite know how to fix this one and google searching has done me no help.
I've got a nav as seen on This Site. If you hover over the logo to the top left, it behaves as a link, thus completing my desired goal. But, if you hover a few pixels below the image, no link. No cursor change or anything. Which is good, until you go down beyond that, in which there is a bit of space where you can hover to find the same link as the above image. This is not good, though I can't find a way to remove this without removing the tag, which defeats the purpose anyway. Can anyone help?
Style them correctly.
a {
cursor: default;
}
img {
cursor: pointer;
}
OR (Sass)
a {
cursor: default;
img {
cursor: pointer;
}
}
After a few hours of looking around other people's codes (bootstrap, materialize, etc) I found that changing the position and display values to absolute and inline-block of the link, it would make the link wrap the image. Hopefully this'll help anyone who had this weird problem too.
Related
I have button which is <a> element with href, which doesnt have any background set on :active/:focus/:visited, but on force/3dTouch tap it gets this weird #b8b8bc background under the text only (while <a> doesnt have any children e.g. <span> etc so I suppose this is the text node highlight).
here's the gif to illustrate the behavior.
I've tried adding -webkit-tap-highlight-color: transparent but it changes only regular tap color, not the forced/3d one
also I thought maybe that's selection color (as I can reproduce this on various websites) so tried to use selection selectors which didn't help as well
::selection {
background: transparent;
}
::-webkit-selection {
background: transparent;
}
::-moz-selection {
background: transparent;
}
Any ideas about possible origin of this?
Good job digging up.
I had the same issue plus another one and here are my solutions.
Post is old but someone could find it useful like me today.
First of all, the forced background was covering my link text totally because I was using user-select: none; on my header links.
So that's something to check, just in case.
Regarding the background color, Force Touch doesn't use the link parent element background but the one that's under it.
If you want to "feel it", we could say that Forced Touch digs into the direct parent background and let the under layer appears.
So, to counter that without having to touch to background color, I use some z-index in the parent element to elevate it, preventing Forced Touch to "dig" :)
So if your links parent element is named card, you can add to your CSS:
.card {
isolation: isolate;
z-index:1;
}
Now, Force Touch will use the parent background color as we want to.
Okay so I found sort of "solution" based on parent's color.
Try to set *{background: red}.
If worked try set same on few parents .parent1 { background: pink}, .parent2 { background: lightblue}, .parent1 { background: salmon} etc.
In my case I found the color applied to force touched text was menu wrapper's background that takes most of the screen when menu is opened.
Side effect of this change - all forcetouched elements will have same color, no option to specify :hover or :active colors (you can see the color is slightly different on the 1st click) and ALL links will have same background:
I imagine you can try setting wrapper's background via JS based on what is clicked. Not sure if that will work. see docs here:
WebKit DOM Programming Topics
So far this seems to me too fragile to touch and I would not recommend doing this. Though you can change this color I've decided to let OS do what it wants here.
I'd need to make my area elements appear as pointer cursor to indicate that they are clickable. The flags on the map at the right, 'http://www.metlifecare.co.nz/bay-of-plenty-villages' should appear like they are links.
I'm pretty sure the method I've been using right now to show the <areas> as pointer cursors is working before. Somehow, now its not working anymore.
CSS I've been using:
area:hover, .hover {
cursor: pointer;
display: block;
}
Based on the example, http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap , the area elements are working as a link. However, the flags on the site I'm currently working are not. They should appear the same also.
Am I missing something or any suggestion for alternative to make it work correctly?
Some tips and tricks here. Seems you're not alone, at least! :)
Setting a cursor [with CSS] on an image map area
This problem is resolved after spending couple of hours looking on the web for a fix.
All what I did was remove the cursor:default; applied to the ''. Voila! The cursor:pointer applied to map elements are now working.
Today I encountered a weird experience in my site LiveGreen
When I hover on the Menu Services, the dropdown goes underneath the image section below that. I tried every possible way like positioning and z-index ing and all kind, and googled a lot, am not bad with HTML and CSS still, it is testing me.
This theme is purchased, so cant post the code. you can check it from the website itself.
Please Help me.
Remove the z-index property on your .main class.
.main {
z-index: 1; /* this is causing your problems */
}
It's fairly difficult to pull off because there are so few unique classes to key off of. The root cause of the issue for you is that the element with a z-index that is higher than your menu applies that z-index higher up the DOM tree which makes it render on top. The best I could come up with is to apply the following, provided that the #aq-block-8801-5 block is always and will always be the nav menu container.
#aq-block-8801-5 {
position: relative;
z-index: 2;
}
So, I have links that are automatically generated.
For a specific page I don't want users to click the link (only see that it is there).
Without modifying the code, I am thinking of putting a div container over it with high z-index so that users cannot click it.
Should I embed a 1 pixel image with background repeat that are positioned exactly on top of the link or is there a better way of achieving this?
Thanks
You can disable pointer events using CSS, actually. For example, if you add a class or can identify the <a> element in some way, you could use this CSS:
a.disabled {
pointer-events: none;
cursor: default;
}
Browse support for pointer-events can be seen here.
Credit to this StackOverflow answer.
Hey stack over flow I have been getting into styling my fire fox browser and have run into a bit of a bump. When I try and re-color my search bar there seems to be a border or something andcant find out what it is that's making that edge white if any one can help me it would be much appreciated.
here is the code I have put in at the moment
input#gbqfif
{
color: #AADA2C !important;
background: #262626;
border: 0px;
}
here is an image of what i'm going for and what is wrong
http://i.imgur.com/dNVxv1A.png
I hope you guys can help and thanks!
That thing, sir, is a div-beast:
I found in my browser it's id = "gs_tti0" what you want to modify. So you should do:
#gs_tti0 {
background-color: #262626;
}
However, it looks like it might be dynamically generated. Just right click in the search bar, inspect element and change that background. If it doesn't work, go one level up (the parent). Keep doing so until you find the one you want.