Question

我想在图片中创建一个部分，当我点击它时，它会提醒你。我知道有很多方法可以在图像上创建部分，但我希望这样。 opacity属性和游标属性似乎在IE9上不起作用，因为当我鼠标移动区域时它不显示指针光标，当我点击该部分时它也不会发出警报。但这在其他浏览器上运行良好。任何人都可以解释为什么会发生这种情况吗？

$(window).load(function () {
  var myImg = document.getElementById("myImg");
  var myDiv = document.createElement("div");
  myDiv.style.position = "absolute";
  myDiv.style.width = "200px";
  myDiv.style.height = "200px";
  myDiv.style.top = "20px";
  myDiv.style.left = "20px";
  myDiv.style.position = "absolute";
  myDiv.style.cursor = "pointer";
  myDiv.style.border = "2px solid red";
  myDiv.style.opacity = 0.3;
  document.body.appendChild(myDiv);
  myDiv.onclick = function () {
    alert("hi");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<img id="myImg" src="http://myartzine.com/wp-content/uploads/2013/10/Gtelaviv_05.jpg">

Answer 1

对于游标，我必须告诉您唯一的跨浏览器语法是：

element {
    cursor: pointer;
    cursor: hand;
}

还有一些关于光标的更多信息：

过去手的价值是   微软说指针的方式;和   IE 5.0和5.5只支持手。   因为它是光标值   最常使用的，大多数其他浏览器   也实施了手。

由于IE 6和7支持指针，   没有理由使用手，   除非旧的IE是您的一部分   目标受众。

对于Opacity，IE 9接受

    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

检查http://css-tricks.com/css-transparency-settings-for-all-broswers/

对于onClick事件处理程序，我认为，

默认情况下，在IE9中，Internet选项＆gt;安全选项卡＆gt;互联网＆gt;自定义级别，向下滚动到“脚本”部分（靠近底部），并且在“活动脚本”中禁用，因此对“启用”进行复选标记。并且，这解决了问题并且onclick工作!!。

Answer 2

IE不支持游标属性的指针值。你应该用这个：

myDiv.style.cursor='hand';

不透明度在IE中为0到100之间的值。所以设置如下：

myDiv.style.opacity=30;

毕竟我认为你可以使用jquery来轻松完成这些任务。

$('<div></div>').css({'cursor':'pointer', 'cursor':'hand', 'opacity':'30'}).click(function(){
    alert('hi');
})

为什么游标，opacity属性和onclick事件处理程序不能在IE9上运行

2 个答案: