1. 程式人生 > >通過css選擇器class給元素添加cursor的坑

通過css選擇器class給元素添加cursor的坑

tex height ssh 等於 light help 通過 first foo

筆者在chrome中遇到了奇特的問題,在通過class給元素添加cursor的自定義圖片時。出現了"Invald property value"提示,crosshair、help等屬性值可以生效。

圖片卻不行,自己研究後發現兩個大坑。

一個是圖片寬或者高需要有一邊小於或等於32px。

另一個很重要就是不能用class選擇器。

例如:

<style type="text/css">
.foo{
width:100px;
height:100px;
cursor:url(http://www.w3school.com.cn/ui2017/compatible_chrome.png)
}
</style>
<div class="fbox">
  <div class="foo"></div>
</div>

  這麽寫會被提示chrome "Invald property value",只能用.fbox div或者.fbox div:first-child來賦值樣式屬性。

<style type="text/css">
.fbox div{
width:100px;
height:100px;
cursor:url(http://www.w3school.com.cn/ui2017/compatible_chrome.png)
}
</style>
<div class="fbox">
  <div class="foo"></div>
</div>

  

通過css選擇器class給元素添加cursor的坑