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.
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'm trying to make text show up on hover after a menu item (so if the menu says HOME I'd want WERE THE HEART IS to show up when I hover over the home part). I found this question with a way to do it (http://bit.ly/1UgPYoK) but I can't locate the menu div in my theme's files in order to add the hidden text div after it. Can I add the div for the hidden text somewhere else or does it have to be contained in the div for the hover item? Is there an easy way to find where the menu text is located in the code? I hope this all makes sense... I researched a bunch of questions and I understand how to do it if I can just find the right div. I'm very new to this!
I believe that you're looking for the HTML title attribute. Consider the following:
<div>Hover over <span title="IS WERE THE HEART IS...">HOME</span></div>
Or is this not at all what you're looking for?
http://www.w3schools.com/tags/att_global_title.asp
Update
[Disclaimer, this is a purely HTML answer - and doesn't utilize CSS.]
This is done with CSS and HTML. What you do is take advantage of CSS display tag. You can go more advanced and style with more accuracy because you could add any other tags inside the span (i.e div,ul...) into it and make a block with colors that look the same in all browsers.
.more-info {
display: none;
}
p:hover .more-info {
display: inline-block;
}
<p>Home<span class="more-info">Is where the heart is.</span></p>
If this does not help you then please clarify:
You can't locate the menu div?
Please provide what code you are working with so we may explore your question in further detail.
You could simply locate the item by Its own id through document.getElementById(item_id) and then set the title AND the alt property to make sure that is cross-compatible.
var item=document.getElementById(foo_id); item.alt='text you want to show; item.title='same 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.
Hi I have a div with a link however when you hover over the div the mouseover state doesn't change i.e. the mouse pointer doesn't change to a finger instead of a mouse
Unfortunately I am unable to replicate this error in jsfiddle it only seems t occur on my Wordpress installation
the address where it occurs is here http://stylrs.com/trustees/ (when you hover over individual names.)
Is there a reason for this?
How can I fix this?
Add this to your css:
.su-lightbox{ cursor: pointer }
Those blocks arn't links at all. I see though you have a click event tied to them. Just give the block a cursor:pointer css style and it will look like a link
try changing with css :
.linkclass:hover {
cursor:pointer;
}
and please edit your question and give us your code. So, we can see the real problem.
you can change it manualy like this :
.your div {
cursor:pointer;
}
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.