div+css鼠标在div上变成竖线

源码如下:
<style>
div.t
{
width:600px;
height:600px;
}
</style>
<div class="t">
faewra
</div>
将其保存为html文件
请问一下为什么当我这个叫t的div没有指定背景色的时候鼠标处于这个div区域时鼠标会变成像在文本上面的那种竖线形式,这样有时候鼠标到哪里去了都看不见,很不方便,请问一下哪位前辈这个要怎样弄才使得在这个div不设置背景色的时候即使鼠标移动到这个div区域时还能保持正常,是要修改样式的什么属性是么?

用css很容易实现,添加一个样式cursor: text;,代码如下:

<!DOCTYPE HTML>
<html>
<head>
    <title>Untitled</title>
    <style>
    div{
        cursor: text;
        background: #eeeeee;
        width: 400px;
        height: 200px;
    }
    </style>
</head>

<body>
<div>
Hello World!
</div>
</body>
</html>

效果如下:

cursor样式说明:

url     éœ€ä½¿ç”¨çš„自定义光标的 URL。注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。
default     é»˜è®¤å…‰æ ‡ï¼ˆé€šå¸¸æ˜¯ä¸€ä¸ªç®­å¤´ï¼‰
auto     é»˜è®¤ã€‚浏览器设置的光标。
crosshair     å…‰æ ‡å‘ˆçŽ°ä¸ºåå­—线。
pointer     å…‰æ ‡å‘ˆçŽ°ä¸ºæŒ‡ç¤ºé“¾æŽ¥çš„指针(一只手)
move     æ­¤å…‰æ ‡æŒ‡ç¤ºæŸå¯¹è±¡å¯è¢«ç§»åŠ¨ã€‚
e-resize     æ­¤å…‰æ ‡æŒ‡ç¤ºçŸ©å½¢æ¡†çš„边缘可被向右(东)移动。
ne-resize     æ­¤å…‰æ ‡æŒ‡ç¤ºçŸ©å½¢æ¡†çš„边缘可被向上及向右移动(北/东)。
nw-resize     æ­¤å…‰æ ‡æŒ‡ç¤ºçŸ©å½¢æ¡†çš„边缘可被向上及向左移动(北/西)。
n-resize     æ­¤å…‰æ ‡æŒ‡ç¤ºçŸ©å½¢æ¡†çš„边缘可被向上(北)移动。
se-resize     æ­¤å…‰æ ‡æŒ‡ç¤ºçŸ©å½¢æ¡†çš„边缘可被向下及向右移动(南/东)。
sw-resize     æ­¤å…‰æ ‡æŒ‡ç¤ºçŸ©å½¢æ¡†çš„边缘可被向下及向左移动(南/西)。
s-resize     æ­¤å…‰æ ‡æŒ‡ç¤ºçŸ©å½¢æ¡†çš„边缘可被向下移动(南)。
w-resize     æ­¤å…‰æ ‡æŒ‡ç¤ºçŸ©å½¢æ¡†çš„边缘可被向左移动(西)。
text     æ­¤å…‰æ ‡æŒ‡ç¤ºæ–‡æœ¬ã€‚
wait     æ­¤å…‰æ ‡æŒ‡ç¤ºç¨‹åºæ­£å¿™ï¼ˆé€šå¸¸æ˜¯ä¸€åªè¡¨æˆ–沙漏)。
help     æ­¤å…‰æ ‡æŒ‡ç¤ºå¯ç”¨çš„帮助(通常是一个问号或一个气球)。

温馨提示:答案为网友推荐,仅供参考
第1个回答  推荐于2016-09-04
你好,请看以下样式,根据自己喜好,可以任意改变鼠标样式
<style type="text/css">
<!--
span {display:block;line-height:30px;margin:5px 0;background:#f0f0f0;text-align:center;}
-->
</style>
<span style="cursor:hand;">hand 手型</span>
<span style="cursor:crosshair;">crosshair 十字</span>
<span style="cursor:text;">text 文本</span>
<span style="cursor:wait;">wait 等待</span>
<span style="cursor:help;">help 问号</span>
<span style="cursor:e-resize;">e-resize 右的箭头</span>
<span style="cursor:ne-resize;">ne-resize 右上的箭头</span>
<span style="cursor:n-resize;">n-resize 上的箭头</span>
<span style="cursor:nw-resize;">nw-resize 左上的箭头</span>
<span style="cursor:w-resize;">w-resize 左的箭头</span>
<span style="cursor:sw-resize;">sw-resize 左下的箭头</span>
<span style="cursor:s-resize;">s-resize 下的箭头</span>
<span style="cursor:se-resize;">se-resize 右下的箭头</span>
<span style="cursor:move;">move 移动</span>追问

感谢,全部财产5分,给你了

追答

不客气,望你在代码路上加油

本回答被提问者采纳