修改光標屬性的元素

的選擇部分我有這樣的HTML呈現向右指向一個簡單的箭頭標誌：修改光標屬性的元素

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div { width: 0px; height: 0px; border-left: 20px solid black; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right: 20px solid transparent; position: absolute; left: 35px; top: 53px; cursor: pointer; } 
</style> 
<body> 
<div></div> 
</body> 
</html>

如果你懸停的話，光標變成指針。但是因爲它實際上是一個方形div，即使您剛好位於div的邊界內的箭頭之外，光標也會轉向指針。

所以我寫了這個Javascript的附加，只有當鼠標懸停在那個箭頭上時，光標才轉動指針。爲此，我計算了Firebug中三角形的三個頂點的座標（從頂部順時針方向(35,53),(55,73),(35,93)）。然後我檢查這個點是否位於這三個頂點形成的三角形內。這是通過檢查每個邊的點和相對頂點是否位於該邊的同一側來實現的（如果是這樣，則通過將該點的座標替換爲該公式中的x和y而獲得的值的乘積將是積極的）。

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div { width: 0px; height: 0px; border-left: 20px solid black; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right: 20px solid transparent; position: absolute; left: 35px; top: 53px; } 
.hoverclass { cursor: pointer; } 
</style> 
<script src="jquery.js"> 
</script> 
<script> 
$(document).ready(function(){ 
$("div").click(function(e) { alert(e.pageX + " " + e.pageY); }); 
function l1(x,y) { return y - x - 18; } 
function l2(x,y) { return x+y-128; } 
function l3(x,y) { return x-35; } 
$("div").hover(function(e) { 
var x = e.pageX; 
var y = e.pageY; 
if (l1(x,y)*l1(35,93) >= 0 && l1(x,y)*l1(35,93) >= 0 && l1(x,y)*l1(35,93) >= 0) { 
$(this).addClass('hoverclass'); 
} 
else { $(this).removeClass('hoverclass'); } 
}, 
function() { 
$(this).removeClass('hoverclass'); 
}); 
}); 
</script> 
<body> 
<div></div> 
</body> 
</html>

但是，結果是不可預測的。有時光標只能在三角形內部轉動指針，有時也會在外部（正如以前一樣），有時甚至根本不會。我懷疑這可能是由於hover函數超時工作，可能暫時掛起腳本。有沒有其他方法可以實現這一點？

來源

2013-01-14 SexyBeast

使用SVG創建箭頭。然後，您可以將CSS分配給該形狀，並且可以根據需要使用。 RaphaelJS將是一個很好的圖書館使用。 –

哦，不，我完全沒有任何知識！有沒有古老的jQuery/CSS方式？ – SexyBeast

並非如你所見，HTML容器總是矩形的。圖像地圖可能有效，但這是一種非常陳舊的做任何事情的方法。 –

這可以通過使用來完成HTML5畫布。基本的想法是檢查畫布元素上mousemove的像素顏色。這樣，你的元素可以是任何形式，如你所願。當然，你應該做下面的代碼一些優化：

SEE WORKING DEMO

function findPos(obj) { 
    var curleft = 0, curtop = 0; 
    if (obj.offsetParent) { 
     do { 
      curleft += obj.offsetLeft; 
      curtop += obj.offsetTop; 
     } while (obj = obj.offsetParent); 
     return { x: curleft, y: curtop }; 
    } 
    return undefined; 
} 

// set up triangle 
var example = document.getElementById('example'); 
var context = example.getContext('2d'); 
context.fillStyle = '#000'; 
context.strokeStyle = '#f00'; 
context.lineWidth = 1; 

context.beginPath(); 
// Start from the top-left point. 
context.moveTo(10, 10); // give the (x,y) coordinates 
context.lineTo(60, 60); 
context.lineTo(10, 120); 
context.lineTo(10, 10); 

// Done! Now fill the shape, and draw the stroke. 
// Note: your shape will not be visible until you call any of the two methods. 
context.fill(); 
context.stroke(); 
context.closePath(); 

$('#example').mousemove(function(e) { 
    var pos = findPos(this); 
    var x = e.pageX - pos.x; 
    var y = e.pageY - pos.y; 
    var coord = "x=" + x + ", y=" + y; 
    var c = this.getContext('2d'); 
    var p = c.getImageData(x, y, 1, 1).data; 
    if(p[3]!='0') $(this).css({cursor:'pointer'}); 
    else $(this).css({cursor:'default'}); 
});

來源

2013-01-14 09:50:09

哇，看起來很有希望。你可以在代碼中添加一些註釋，以便我能更好地理解它嗎？ – SexyBeast

代碼很簡單，你應該看看HTML5畫布或詢問是否有某些你不明白的東西。 –

請解釋整體邏輯.. – SexyBeast

你最好用CSS代替。與：之前和之後：僞類可以做魔術。查看Nicolas Gallagher的Pure CSS GUI icons。

如果你使用任何CSS預處理器，這些圖標可以被包裹起來作爲一個mixin，這樣所需的性能，可以這樣分配：

#icon > .close(16px, #fff, #E83921);

Result

來源

2013-01-14 09:39:29

你可以做任何形狀都僅適用於CSS光標指針。這個想法是旋轉包裝容器，其中有overflow: hidden（你可以有幾個取決於你需要的形狀）。在OP問題的情況下，該代碼做了一招：

<div class="arrow"><i></i></div> 

.arrow { 
    margin: 100px; 
    border_: 1px red solid; 
    width: 40px; 
    height: 40px; 
    overflow: hidden; 
    -webkit-transform: rotate(45deg); 
    transform: rotate(45deg); 
} 
.arrow i { 
    height: 65px; 
    width: 65px; 
    background-color: green; 
    content: ''; 
    display: block; 
    cursor: pointer; 
    margin: -35px 0 0 11px; 
    -webkit-transform: rotate(45deg); 
    transform: rotate(45deg); 
}

看到這個演示：http://cssdesk.com/PaB5n

真，這需要CSS變換支持，所以它不是跨瀏覽器。

來源

2013-01-14 10:26:00 dfsq

哇。這看起來很酷。你能否詳細解釋一下你的邏輯？ – SexyBeast

不幸的是，真正有趣的是，在你提到它時IE 10不起作用 –

修改光標屬性的元素

回答

相關問題