ต่อไป »

[หนึ่งสุดหล่อ]

กำลังทำ css ที่เอา icon ใส่ในรูปเดียวกันอยู่ครับ แบบที่มี hover ด้วย ตอนนี้ทำให้ icon hover ได้แล้ว แต่อยากทำให้เมื่อเอา mouse ไปไว้บน text link ให้รูปมันเปลี่ยนด้วย โดยใช้ css อย่างเดียว พอทำได้ไหมครับ

HTML

โค๊ด:

<li id="nav"><a href="/"><span></span>Anchor Text</a></li>

CSS

โค๊ด:

#nav{ width:100px; height:100px; text-align:center;}
#nav span{ width:20px; height:20px; background: url(/icons.png) top center no-repeat; }
#nav span:hover{ background-position: 0 0; }
#nav span:hover{ background-position: -20px 0; }

ลองแก้เองโดนเอา text เข้าไปใส่ใน span แล้ว แต่ที่มันเล็กไป ไม่พอใส่ครับ ขยายก็ไม่ได้ ติดรูปอื่นมาด้วย ต้องขอคำชี้แนะด้วยครับ

ขอบคุณล่วงหน้าครับ
 

[chaichoo]

ผู้น้อยด้อยความรู้ขอเข้ามาดูเป็นวิทยาทานหน่อยครับ... ::อ้่าวไม่มีเลยหรอคับ

[หนึ่งสุดหล่อ]

ดันหน่อยน๊า 

[aCustiCz]

โค๊ด:

<div id="test">
	<ul>
    	<li><a href="#" title="#"><span></span>Test Content List</a></li>
        <li><a href="#" title="#"><span></span>Test Content List</a></li>
        <li><a href="#" title="#"><span></span>Test Content List</a></li>
        <li><a href="#" title="#"><span></span>Test Content List</a></li>
        <li><a href="#" title="#"><span></span>Test Content List</a></li>
    </ul>
</div>


//////////////////////////////////////////////////////////////////


#test{ width: 200px;}
#test ul { list-style: none; padding: 15px;}
#test li { height: 20px; margin-bottom: 5px; display:block;}
#test li span { width: 16px; height: 16px; float: left; display: block; margin-right: 5px; background: url(http://g-ecx.images-amazon.com/images/G/01/x-locale/communities/social/snwicons._V156405323_.png); background-position: 0 0;}
#test li:hover span {background-position: 16px 0; }

ลองศึกษาดูนะครับ

[Taurusz]

ปรับ width และ height เอาครับ
แต่ที่รูปอื่นมันโผล่มาด้วยเพราะ รูป icons.png คุณ ระหว่างสองรูปที่รวมกันอยู่มันใกล้กันไปครับ
แนะนำให้แก้ไขที่รูป icons.png ด้วย โดยเอารูปขณะ hover ขยับลงมาอีก แล้ววัด pixel จากขอบบนใหม่ครับ

[หนึ่งสุดหล่อ]

โค๊ด:

<div id="test">
	<ul>
    	<li><a href="#" title="#"><span></span>Test Content List</a></li>
        <li><a href="#" title="#"><span></span>Test Content List</a></li>
        <li><a href="#" title="#"><span></span>Test Content List</a></li>
        <li><a href="#" title="#"><span></span>Test Content List</a></li>
        <li><a href="#" title="#"><span></span>Test Content List</a></li>
    </ul>
</div>


//////////////////////////////////////////////////////////////////


#test{ width: 200px;}
#test ul { list-style: none; padding: 15px;}
#test li { height: 20px; margin-bottom: 5px; display:block;}
#test li span { width: 16px; height: 16px; float: left; display: block; margin-right: 5px; background: url(http://g-ecx.images-amazon.com/images/G/01/x-locale/communities/social/snwicons._V156405323_.png); background-position: 0 0;}
#test li:hover span {background-position: 16px 0; }

ลองศึกษาดูนะครับ

อันนี้ของจริง
ผมเปลี่ยนที่เดียวจาก #test li span:hover ไปเป็น #test li:hover span ทำได้เลยครับ

ความรู้ใหม่ด้วยว่า hover สามารถทำที่ parent ได้ด้วยย

ขอบคุณมากๆๆเลยครับ
+1 ทุกท่านเลยนะครับ
 

[aCustiCz]

โค๊ด:

<div id="test">
	<ul>
    	<li><a href="#" title="#"><span></span>Test Content List</a></li>
        <li><a href="#" title="#"><span></span>Test Content List</a></li>
        <li><a href="#" title="#"><span></span>Test Content List</a></li>
        <li><a href="#" title="#"><span></span>Test Content List</a></li>
        <li><a href="#" title="#"><span></span>Test Content List</a></li>
    </ul>
</div>


//////////////////////////////////////////////////////////////////


#test{ width: 200px;}
#test ul { list-style: none; padding: 15px;}
#test li { height: 20px; margin-bottom: 5px; display:block;}
#test li span { width: 16px; height: 16px; float: left; display: block; margin-right: 5px; background: url(http://g-ecx.images-amazon.com/images/G/01/x-locale/communities/social/snwicons._V156405323_.png); background-position: 0 0;}
#test li:hover span {background-position: 16px 0; }

ลองศึกษาดูนะครับ

อันนี้ของจริง
ผมเปลี่ยนที่เดียวจาก #test li span:hover ไปเป็น #test li:hover span ทำได้เลยครับ

ความรู้ใหม่ด้วยว่า hover สามารถทำที่ parent ได้ด้วยย

ขอบคุณมากๆๆเลยครับ
+1 ทุกท่านเลยนะครับ
 

ผมก็มั่วเอาอีกที ลองผิดลองถูกไปเรื่อยๆ