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

**soma** · 21-01-2009

بالنسبة لو لديك textarea عدل الكود في الجزئيتين

كود:

$("textarea,input").focus(function () {
         $(this).next("span").addClass('tooltips');
    });
    
	$("textarea,input").blur(function () {
         $(this).next("span").removeClass('tooltips')
    });

**apitos** · 22-01-2009

شكرا لك أخي soma.

**apitos** · 25-01-2009

لكي لا أعمم نوافذ الـ hint على جميع وسوم span الموجودة في ملف الـ HTML

قمت باضافة السطر التالي في ملف الـ CSS :

كود:

form1 span#

مع تسمية النموذج :

كود:

<form id="form1" name="form">

ولكن الـ hint لم يعمل معي !!؟

فجربت التالي :

كود:

span .hint

وفي ملف الـ html اضفت الى الـ span

كود:

<span class="hint">

وغيرت في سطر الـAJAX ليصبح كالتلي :

كود:

 
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
 
$("input, textarea, select").focus(function () {
$(this).next("span .hint").addClass('notice');
});
 
$("input, textarea, select").blur(function () {
$(this).next("span .hint").removeClass('notice')
});
});
</script>

ولكن الأمر كذلك لم يشتغل معي !!!؟

ما الأمر يا ترى ؟

شكراَ.

**soma** · 25-01-2009

ممكن تضع كودك كاملاً ....

**apitos** · 26-01-2009

ها هو :

كود:

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

  });
  </script>
<style>
   span.hint {
    padding:5px 5px 5px 40px;
 width:120px;
 position:absolute;
 margin: 2px 0 0 14px;
    display:none;
 }
   
   .tooltips{ 
     display:inline;
  background-color:gray;
   }   
  </style>
</head>
<body>
<p>User Name<br>
  <input type="text" />
  <span class="hint">Enter User Name</span></p>
<p>Password<br>
  <input type="password" />
  <span class="hint">Enter Password</span></p>
</body>
</html>

**soma** · 27-01-2009

كود:

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

  });
  </script>
<style>
   .hint {
    padding:5px 5px 5px 40px;
 width:120px;
 position:absolute;
 margin: 2px 0 0 14px;
    display:none;
 }
   
   .tooltips{ 
     display:inline;
  background-color:gray;
   }   
  </style>
</head>
<body>
<p>User Name<br>
  <input type="text" />
  <span class="hint">Enter User Name</span></p>
<p>Password<br>
  <input type="password" />
  <span class="hint">Enter Password</span></p>
</body>
</html>

**apitos** · 27-01-2009

أخي soma،

أين الفرف بين الكودين ؟

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

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

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

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

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

مطلوب كلاس

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

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

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

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