Öğe ve sınır için farklı imleçler nasıl ayarlanır? PSEUDO elemanları? Bir yolu var mı ? Not: Evet, JS ile yapılabilir, tek bir elemanla saf CSS kullanarak bir yol arıyordum. Firefox'ta imleç imlecine izin veriliyor, ancak Chrome'da değilBir öge ve kenarlık için farklı imleçler nasıl ayarlanır
:before ve :after.
Burada bir demo görebilirsiniz: http://jsfiddle.net/ZLZZG/, ancak gerçekten öğeyi sarma ve sarmalayıcıya bir imleç vererek daha iyi olacaksınız.
Güncelleme: Bu düzenleme sırasında (6 Nis 2015) bu, şu anda Chrome'da çalışıyor.
cursor özelliği, öğenin kenarlık dahil olmak üzere tüm alanında işaretçinin şeklini (CSS'de “imleç” olarak adlandırılan) etkilediğinden, bunun doğrudan bir yolu yoktur.
Öğenin içerik alanını belirlemek için JavaScript'i kullanabilir ve ardından içerik için ek bir öğe eklenecek şekilde DOM'ı değiştirebilir ve ardından iç eleman ve dış öğe için farklı "imleç" ayarlayabilirsiniz.
Ancak, biçimlendirme böyle şeyler yapmak normalde basittir ve daha sonra bunun için hiç JavaScript gerekmez:
<div id=foo><div id=foo-content>...</div></div>
Şimdi #foo bir sınır ayarlayabilir ve hem cursor set elementler. #foo'da ayarlanan “imleç” daha sonra yalnızca kenarlığa uygulanır.
Evet, teşekkürler, ama bizimki DOM yoğun bir uygulama, dolayısıyla tek bir element sans Javascript ile bunu elde etmek istiyordu. Daha spesifik olmak için başlığı düzenledim. – cypher
Böyle bir çok HTML'sinin/CSS kodu, ama bir şey size yardımcı olacaktır bulunuyor: "Başlık" Orada ne işi var
.container {
position: relative;
}
.crop {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
transition: all 0.25s;
cursor: move;
}
.crop .crop-line {
position: absolute;
transition: all 0.25s;
}
.crop:hover .crop-line {
border-color: rgba(123,53,132,1);
}
.crop .crop-top-line {
top: 0;
left: 0;
right: 0;
height: 5px; /* 5px for the mouse cursor update size */
border-top: 1px solid rgba(204,31,48,1); /* 1px for the "border" size */
cursor: n-resize;
}
.crop .crop-bottom-line {
bottom: 0;
left: 0;
right: 0;
height: 5px; /* 5px for the mouse cursor update size */
border-bottom: 1px solid rgba(204,31,48,1); /* 1px for the "border" size */
cursor: s-resize;
}
.crop .crop-left-line {
top: 0;
left: 0;
bottom: 0;
width: 5px; /* 5px for the mouse cursor update size */
border-left: 1px solid rgba(204,31,48,1); /* 1px for the "border" size */
cursor: w-resize;
}
.crop .crop-right-line {
top: 0;
right: 0;
bottom: 0;
width: 5px; /* 5px for the mouse cursor update size */
border-right: 1px solid rgba(204,31,48,1); /* 1px for the "border" size */
cursor: e-resize;
}
.crop .crop-corner {
position: absolute;
width: 6px;
height: 6px;
border-radius: 2px;
border: 1px solid #808080;
background: #FFF;
opacity: 0;
transition: all 0.25s;
}
.crop .crop-top-left-corner {
top: -3px;
left: -3px;
cursor: nw-resize;
}
.crop .crop-top-right-corner {
top: -3px;
right: -3px;
cursor: ne-resize;
}
.crop .crop-bottom-left-corner {
bottom: -3px;
left: -3px;
cursor: sw-resize;
}
.crop .crop-bottom-right-corner {
bottom: -3px;
right: -3px;
cursor: se-resize;
}
.crop:hover .crop-corner {
opacity: 1;
}<div class="container">
<div class="crop">
<div class="crop-line crop-top-line"></div>
<div class="crop-line crop-right-line"></div>
<div class="crop-line crop-bottom-line"></div>
<div class="crop-line crop-left-line"></div>
<div class="crop-corner crop-top-left-corner"></div>
<div class="crop-corner crop-top-right-corner"></div>
<div class="crop-corner crop-bottom-right-corner"></div>
<div class="crop-corner crop-bottom-left-corner"></div>
</div>
</div>
? Biçimlendirme araçlarını yanlış yazdınız mı? – BoltClock
'İmleç 'stil özniteliğini kullanamaz mısınız? Sahte selektörler için farklı bir şey belirtebilirsiniz, örneğin: hover' gibi – Ian
Bunun gibi bir şey? http://jsfiddle.net/k8GRe/ – Blender