what css property is used to bold text?




كيف يمكنني جعل المؤشر يداً عندما يمرر المستخدم فوق عنصر قائمة؟ (13)

CSS:

.auto            { cursor: auto; }
.default         { cursor: default; }
.none            { cursor: none; }
.context-menu    { cursor: context-menu; }
.help            { cursor: help; }
.pointer         { cursor: pointer; }
.progress        { cursor: progress; }
.wait            { cursor: wait; }
.cell            { cursor: cell; }
.crosshair       { cursor: crosshair; }
.text            { cursor: text; }
.vertical-text   { cursor: vertical-text; }
.alias           { cursor: alias; }
.copy            { cursor: copy; }
.move            { cursor: move; }
.no-drop         { cursor: no-drop; }
.not-allowed     { cursor: not-allowed; }
.all-scroll      { cursor: all-scroll; }
.col-resize      { cursor: col-resize; }
.row-resize      { cursor: row-resize; }
.n-resize        { cursor: n-resize; }
.e-resize        { cursor: e-resize; }
.s-resize        { cursor: s-resize; }
.w-resize        { cursor: w-resize; }
.ns-resize       { cursor: ns-resize; }
.ew-resize       { cursor: ew-resize; }
.ne-resize       { cursor: ne-resize; }
.nw-resize       { cursor: nw-resize; }
.se-resize       { cursor: se-resize; }
.sw-resize       { cursor: sw-resize; }
.nesw-resize     { cursor: nesw-resize; }
.nwse-resize     { cursor: nwse-resize; }

يمكنك أيضًا جعل المؤشر رمزًا:

.img-cur {
   cursor: url(images/cursor.png), auto;
}

لدي قائمة ، ولدي معالج النقر لعناصرها:

<ul>
  <li>foo</li>
  <li>goo</li>
</ul>

كيف يمكنني تغيير مؤشر الماوس إلى مؤشر يد (مثل عند المرور فوق زر)؟ الآن يتحول المؤشر إلى مؤشر تحديد النص عند تمرير مؤشر الماوس فوق عناصر القائمة.


أعتقد أنه سيكون من الذكاء فقط إظهار مؤشر اليد / المؤشر عندما يكون javascript متاحًا. لذلك لن يشعر الناس بأنهم يمكنهم النقر على شيء غير قابل للنقر.

لتحقيق ذلك ، يمكنك استخدام javascript لإضافة css إلى العنصر مثل ذلك

$("li").css({"cursor":"pointer"});

أو تسلسلها مباشرة إلى معالج النقر.

أو عندما يستخدم المعزز مع <html class="no-js"> ، سيبدو css مثل هذا

.js li { cursor: pointer; }

استخدم لي

li:hover{
 cursor: pointer;
}

شاهد المزيد من خاصية المؤشر مع المثال بعد تشغيل خيار المقتطف.

.auto            { cursor: auto; }
.deafult         { cursor: default; }
.none            { cursor: none; }
.context-menu    { cursor: context-menu; }
.help            { cursor: help; }
.pointer         { cursor: pointer; }
.progress        { cursor: progress; }
.wait            { cursor: wait; }
.cell            { cursor: cell; }
.crosshair       { cursor: crosshair; }
.text            { cursor: text; }
.vertical-text   { cursor: vertical-text; }
.alias           { cursor: alias; }
.copy            { cursor: copy; }
.move            { cursor: move; }
.no-drop         { cursor: no-drop; }
.not-allowed     { cursor: not-allowed; }
.all-scroll      { cursor: all-scroll; }
.col-resize      { cursor: col-resize; }
.row-resize      { cursor: row-resize; }
.n-resize        { cursor: n-resize; }
.e-resize        { cursor: e-resize; }
.s-resize        { cursor: s-resize; }
.w-resize        { cursor: w-resize; }
.ns-resize       { cursor: ns-resize; }
.ew-resize       { cursor: ew-resize; }
.ne-resize       { cursor: ne-resize; }
.nw-resize       { cursor: nw-resize; }
.se-resize       { cursor: se-resize; }
.sw-resize       { cursor: sw-resize; }
.nesw-resize     { cursor: nesw-resize; }
.nwse-resize     { cursor: nwse-resize; }



.cursors > div {
   float: left;
   box-sizing: border-box;
  background:#f2f2f2;
  border:1px solid #ccc;
   width: 20%;
   padding: 10px 2px;
   text-align: center;  
   white-space: nowrap;
   &:nth-child(even) {
      background: #eee;     
   }
   &:hover {
      opacity: 0.25
   }
}
<h1>Example of cursor</h1>

<div class="cursors">
    <div class="auto">auto</div>
    <div class="default">default</div>
    <div class="none">none</div>
    <div class="context-menu">context-menu</div>
    <div class="help">help</div>
    <div class="pointer">pointer</div>
    <div class="progress">progress</div>
    <div class="wait">wait</div>
    <div class="cell">cell</div>
    <div class="crosshair">crosshair</div>
    <div class="text">text</div>
    <div class="vertical-text">vertical-text</div>
    <div class="alias">alias</div>
    <div class="copy">copy</div>
    <div class="move">move</div>
    <div class="no-drop">no-drop</div>
    <div class="not-allowed">not-allowed</div>
    <div class="all-scroll">all-scroll</div>
    <div class="col-resize">col-resize</div>
    <div class="row-resize">row-resize</div>
    <div class="n-resize">n-resize</div>
    <div class="s-resize">s-resize</div>
    <div class="e-resize">e-resize</div>
    <div class="w-resize">w-resize</div>
    <div class="ns-resize">ns-resize</div>
    <div class="ew-resize">ew-resize</div>
    <div class="ne-resize">ne-resize</div>
    <div class="nw-resize">nw-resize</div>
    <div class="se-resize">se-resize</div>
    <div class="sw-resize">sw-resize</div>
    <div class="nesw-resize">nesw-resize</div>
    <div class="nwse-resize">nwse-resize</div>
</div>


استعمال

cursor: pointer;
cursor: hand;

إذا كنت تريد الحصول على نتيجة crossbrowser!


تقترح جميع الاستجابات الأخرى استخدام مؤشر CSS القياسي ، ومع ذلك ، هناك طريقتان:

  1. تطبيق cursor:pointer; خاصية CSS cursor:pointer; إلى العناصر. (هذا هو النمط الافتراضي عندما يمرر المؤشر فوق زر.)

  2. تطبيق cursor:url(pointer.png); خاصية CSS cursor:url(pointer.png); باستخدام رسم مخصص لمؤشرك. قد يكون هذا الأمر مرغوبًا بشكل أكبر إذا كنت ترغب في التأكد من أن تجربة المستخدم متطابقة على جميع الأنظمة الأساسية (بدلاً من السماح للمتصفح / نظام التشغيل بتحديد شكل مؤشر المؤشر الخاص بك). لاحظ أنه يمكن إضافة الخيارات الاحتياطية في حالة عدم العثور على الصورة ، بما في ذلك عناوين url الثانوية أو أي من الخيارات الأخرى مثل cursor:url(pointer.png,fallback.png,pointer);

وبالطبع ، يمكن تطبيق هذه العناصر على عناصر القائمة بهذه الطريقة ، li{cursor:pointer;} ، أو class. .class{cursor:pointer;} ، أو كقيمة لسمة النمط لكل style="cursor:pointer;" عنصر style="cursor:pointer;" .


فقط من أجل الاكتمال:

cursor: -webkit-grab;

يمنحك أيضًا اليد التي تعرفها عند تحريك عرض الصورة.

مفيد للغاية إذا كنت ترغب في محاكاة السلوك الاستيلاء باستخدام مسجى و mousedown.


لرمز اليد الأساسية: حاول

cursor:pointer 

إذا كنت تريد رمز اليد مثل سحب بعض العناصر وإسقاطها ،

محاولة

cursor:grab

لكي تتمكن من جعل أي شيء يحصل على معالجة "mousechange" ، يمكنك إضافة فئة CSS:

.mousechange:hover {
  cursor: pointer;
}
<span class="mousechange">Some text here</span>

لم أكن لأقول لاستخدام cursor:hand لأنها كانت صالحة فقط ل IE 5.5 وأدناه ، وجاء IE 6 مع XP (2002). سيحصل الأشخاص على التلميح فقط للترقية عند توقف المتصفح عن العمل لهم. بالإضافة إلى ذلك ، في Visual Studio ، سيتم تسطير أحمر هذا الإدخال. يقول لي:

التحقق من الصحة (CSS 3.0): "اليد" ليست قيمة صالحة لخاصية "المؤشر"


هذا يجب أن يعمل

<style>
li:hover{
    cursor: hand;
}
</style>

يمكنك أيضًا استخدام النمط التالي

li {
      cursor: grabbing;
   }

li:hover {
    cursor: pointer;
}

يمكن الاطلاع here القيم الصالحة الأخرى (التي لا تحمل hand ) لمواصفات HTML الحالية.


li:hover {cursor: hand; cursor: pointer;}







css