css cursor özelliği mouse işaretçisinin stilini belirlemek için kullanılır. Örneğin buton üzerine geldiğinde bir el işaretini alması gibi. Varsayılan değeri auto değeridir. Varsayılan değer iken input elementlerinde text olur. Yani auto değerinde iken elemanların varsayılan değerine göre otomatik değer alır.
Aldığı değerler : auto, default, none, pointer, text, vertical-text, crosshair, cell, help, alias, copy, progress, wait, zoom-in, zoom-out, grab, grabbing, move, no-drop, not-allowed, all-scroll, row-resize, col-resize, nwse-resize, nw-resize, se-resize, nesw-resize, ne-resize, sw-resize, ns-resize, n-resize, s-resize, ew-resize, e-resize, w-resize, url, initial, inherit.
Yukarıda görüldüğü gibi birçok mouse işaretçisi olduğu için css cursor özelliğine aldığı değerlerin birkaçına örnek vereceğiz.
Örnek:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.container {
display: flex;
padding: 20px 0;
}
.box {
height: 60px;
width: 60px;
background-color: green;
color: #fff;
margin-right: 10px;
text-align: center;
line-height: 60px;
}
.one:hover { cursor: default;}
.two:hover { cursor: pointer;}
.three:hover { cursor: text;}
.four:hover { cursor: move;}
.five:hover { cursor: zoom-in;}
</style>
</head>
<body>
<div class="container">
<div class="box one"> default </div>
<div class="box two"> pointer </div>
<div class="box three"> text </div>
<div class="box four"> move </div>
<div class="box five"> zoom-in </div>
</div>
</body>
</html>Örneğimizde görüldüğü gibi elemanlara atadığımız cursor değeri üzerine geldiğimizde aktif oluyor.
Başka bir yazımızda görüşmek üzere…
