في ما يزيد عن عشرة أسطر من الكود ، لا يمكن تحقيق هذا التأثير. انظر التأثير!
هيكل HTML:
نسخة الكود كما يلي:
<ul>
<li> <img src = "Images/10.jpg"/> <a href = "#"> <span> 1 </span> </a> </li>
<li> <img src = "images/11.jpg"/> <a href = "#"> <span> 2 </span> </a> </li>
<li> <img src = "Images/12.jpg"/> <a href = "#"> <span> 3 </span> </a> </li>
<li> <img src = "Images/13.jpg"/> <a href = "#"> <span> 4 </span> </a> </li>
<li> <img src = "Images/10.jpg"/> <a href = "#"> <span> 5 </span> </a> </li>
<li> <img src = "images/11.jpg"/> <a href = "#"> <span> 6 </span> </a> </li>
<li> <img src = "Images/12.jpg"/> <a href = "#"> <span> 7 </span> </a> </li>
<li> <img src = "Images/13.jpg"/> <a href = "#"> <span> 8 </span> </a> </li>
</ul>
رمز CSS:
نسخة الكود كما يلي:
*{الهامش: 0 ؛
.
.
.list li Img {float
.list li a{ position:absolute; left:0; top:0; width:150px; height:0; background:#999; margin-top:40px; display:inline; text-align:c enter; line-height : 80px.
رمز JQ (لاحظ أنك تحتاج إلى تقديم مكتبة JQ):
نسخة الكود كما يلي:
$ (function () {
$ ('. قائمة li'). hover (function () {
$ (هذا).
$ (هذا).
$ (this) .siblings ('a'). stop ().
}) ؛
}، وظيفة () {
$ (هذا).
$ (هذا).
$ (this) .siblings ('img'). stop ().
}) ؛
}) ؛
}) ؛
أليست بعض الجمل البسيطة من رمز JQ؟ عزيزي ، يمكنك أيضًا نسخه وترى التأثير!