كلاس hints بالـ CSS فقط ؟

**apitos** · 18-01-2009

السلام عليكم،

هل هناك كلاس hint بالـ CSS فقط لاستعمالها على حقول النماذج ؟

مثلاً :

كود:

 
<textarea></textarea><span class="hint">Your message here !</span>

شكراً.

**cssguru** · 19-01-2009

لا يوجد اي كلاس في CSS بهذا الاسم، ولا يوجد أصلا كلاسات جاهزة في CSS
وضح ماذا تريد بالضبط

**apitos** · 19-01-2009

لم أقصد كلاس جاهزة.

وانما لأحد يفيدنا بها ان كانت على النت او احد المواقع.

المهم ما اريده هو كيف يتم اظهار نافذة جانبية عندما نؤشر بالفارة داخل حقل input لإعطاء تفسير أو مساعدة المستعمل لما يجب عليه ان يدخله من معلومات في حقل input ؟

شكراً.

**عبد الواحد البشيري** · 20-01-2009

هل هذا ما تريده ؟

كود HTML:

<html dir="rtl">
<head>
<script type="text/javascript">
var show=function(name){
	if(document.getElementById(name).style.display == "none"){
	document.getElementById(name).style.display="";
	}else{
	document.getElementById(name).style.display="none";
	};
}
</script>
<style type="text/css")>
.hint{
padding:25px;
border: 1px solid #E8A722;
color:#FF6100;
background: #FFE294;
}
</style>
</head>
<body>
<div id="mydiv">
<form>
<p>
<label>الاسم</label><br />
<input type="text" name="name" onFocus="show('name');" onBlur="show('name');">
<span style="display:none" id="name" class="hint">فضلا اكتب اسمك</span>
</p>
<p>
<label>الاميل</label><br />
<input type="text" name="email" onFocus="show('email');" onBlur="show('email');">
<span style="display:none" id="email" class="hint">فضلا اكتب بريد اليكتروني صحيح</span>
</p>
</form>
</div>
</body>
</html>

**apitos** · 20-01-2009

اهلا اخي البشيري،

نعم الكود يأتي على هاته الشاكلة (رغم اني أبحث عن واحد بدون جافا سكريبت

)

وقد جربته على متصفح IE6 ولكن لم يظهر أي شيء

كود:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="XHTML namespace">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var show=function(name){
 if(document.getElementById(name).style.display == "none"){
 document.getElementById(name).style.display="";
 }else{
 document.getElementById(name).style.display="none";
 };
}
</script>
<style type="text/css")>
#mydiv .hint{
padding:25px;
border: 1px solid #E8A722;
color:#FF6100;
background: #FFE294;
}
</style>
</head>
<body>
<div id="mydiv">
  <form>
    <p>
      <label>الاسم</label>
      <br />
      <input type="text" name="name" onFocus="show('name');" onBlur="show('name');">
      <span style="display:none" id="name" class="hint">فضلا اكتب اسمك</span> </p>
    <p>
      <label>الاميل</label>
      <br />
      <input type="text" name="email" onFocus="show('email');" onBlur="show('email');">
      <span style="display:none" id="email" class="hint">فضلا اكتب بريد اليكتروني صحيح</span> </p>
  </form>
</div>
</body>
</html>

شكراً.

**cssguru** · 20-01-2009

وضح المطلوب
هل بمجرد وضع الفأرة في حقل textarea تريد ان تظهر رسالة توضيحية ؟

**apitos** · 20-01-2009

نعم هو كذلك

**cssguru** · 20-01-2009

اذن تستطيع الحصول على ما تريد ب jquery

**apitos** · 21-01-2009

المشاركة الأصلية كتبت بواسطة cssguru مشاهدة المشاركة

اذن تستطيع الحصول على ما تريد ب jquery

اسمع به ولا اعرف عنه شيئاً ....

هل من مساعدة في هذا المجال لحل مشكلتي ؟

شكراً.

**cssguru** · 21-01-2009

مع اني لم افهم طلبك جيدا ومع ان الحلول ب jquery عديدة
ارفق مثالا لشيئ رايته في موقع ما

**apitos** · 21-01-2009

هناك العديد من الأمثلة ولكن بما انها "ممزوجة" بالـ CSS والـ Javascript وانا لم افهم جيدا الجافا ارتأيت البحث عن حل بالـ CSS الخالص.

وأنت الآن تقترح علي التوجه نحو الـ JQuery لحل المشكلة

نحو هذا المثال.

**soma** · 21-01-2009

بعد اذن الأخ cssguru

هذه محاولة بسيطة باستخدام JQuery ومجرب في IE6 و IE7 و Opera و Safari و Mozilla ...

كود:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="jquery.js"></script>
  
  <script>
  $(document).ready(function(){
    
    $("input").focus(function () {
         $(this).next("span").addClass('tooltips');
    });
    
	$("input").blur(function () {
         $(this).next("span").removeClass('tooltips')
    });


  });
  </script>
  <style>
   span {display:none;}
   
   .tooltips{ 
     display:inline;
	 background-color:gray;
   }   
  </style>
</head>
<body>
  <p>User Name<br><input type="text" /> <span>Enter User Name</span></p>
  <p>Password<br><input type="password" /> <span>Enter Password</span></p>
</body>
</html>

**apitos** · 21-01-2009

أخي soma.

شكرا على المثال.

ولكن اردت البحث عن كلاس tooltips في ملف jquery-1.3.min.js لم أجدها !!!!

كيف ذلك ؟

**soma** · 21-01-2009

tooltips هو عبارة عن CSS Class لتنسيق عبارة الـ Span موجود داخل الوسم Style .

**apitos** · 21-01-2009

آه نعم .. عذرا لم أره.

ولكن هناك مشكلة :

فحتى الأزرار و checkbox و radio button سوف يحدث معها نفس الحدث لأنها كلها input !!!

ولن يحدث هذا الأمر في textarea.

فما الحل ؟

شكراً.

الموضوع: كلاس hints بالـ CSS فقط ؟

أدوات الموضوع

بحث في الموضوع

كلاس hints بالـ CSS فقط ؟

المواضيع المتشابهه

مشكلة بـ كلاس WHM !

مطلوب كلاس

[class] أول كلاس أقوم ببرمجته, كلاس المتغيرات

فنشكن عمل ملف zip او كلاس

كيف استخدم كلاس ؟

ضوابط المشاركة