开发者

how would one block the selecting of text or change the cursor to the pointer over certain text

开发者 https://www.devze.com 2022-12-28 13:37 出处:网络
i have a button in html that has a background image and text over开发者_运维百科top of it, how can i disable the selecting of that text so it looks more \"seamless\"?

i have a button in html that has a background image and text over开发者_运维百科top of it, how can i disable the selecting of that text so it looks more "seamless"?

echo '<td width="130" height="30"'. "onClick='document.location = ".'"'.$value.'";'."'><center>".$key."</center></td></a>";


Use this css:

#defaultPointer{
    cursor:default;
}

for this div:

<div id="defaultPointer">
<p>
hello world
</p>
</div>

Just a sample, but it should totes McGoats make it more seemless. I've done the same with a site before.

In your case you'd probably just add the id to the td you've got there.

Hope this helps.


Two ways of doing this

- Render the text as image as we have email in Facebook
- Overlay it with a Div with semi transparent image as a background


If I have understood your question correcty, you want it to behave like a button, just add to your "td" a style:

style="cursor:pointer;"


To style the mouse pointer, you need to use the cursor CSS style.

.normalpointer {
    cursor:default;
}

This works in all browsers. (There are some pointer types that can be styled which do have cross-browser issues in older browsers, but default definitely works everywhere)

Disabling the ability to select text is slightly more complex: you need to do a few things, because browser support is varied.

For browsers that support doing it via CSS, you need the following:

.unselectable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

ie user:select:none; plus a bunch of browser-specific variants on the same. Some of those browser-specific variants can probably be dropped now, as support has improved, but if you keep them anyway, you'll be able to support people who haven't upgraded their browsers in a while.

I believe the above also works in IE9, but older versions of IE definitely don't support it. For those, you need to add the following attribute to the element you want to make unselectable: unselectable="on"

Thus, an unselectable div in all browsers would look like this:

<div class='unselectable' unselectabnle='on'>....</div>

(with the class referencing the stylesheet above)

An alternative to the user-select CSS style would be to use ::selection CSS. This allows you to style how text looks when it's selected. You could use this for example to set the selection text to look the same as normal text, which would allow the text to still be selected, while not being actually visibly changed:

.myclass::selection {
    background: transparent;
}

again, you may need some vendor-specific stylesheets for to support older versions of some browsers -- eg:

.myclass::-moz-selection {
    background: transparent;
}

Hope that helps.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号