A-AA+then

มีคำถามมาจากกบอร์ดเกี่ยวกับ Rollover Menu ผมเลยเอาโค้ดมาลงให้ดู เผื่อมีใครสนใจเหมือนกัน และเพื่อเป็นกรณีศึกษา

คำถามมีอยู่ว่า ได้ออกแบบ Rollover Menu แล้ว แต่เมื่อเอาเมาส์คลิกที่เมนู จะทำให้ไม่มีการแสดง Rollover อีก
<div id="navigation">
 <ul>
  <li><a href="#">หน้าแรก</a></li>
  <li><a href="#">ประวัติผู้จัดทำ</a></li>
  <li><a href="#">รายชื่อผลงาน</a></li>
  <li><a href="#">เกี่ยวกับเรา</a></li>
 <ul>
</div>

ด้านบนเป็นโค้ดส่วนเมนู ส่วนด้านล่างเป็นโค้ดต้นฉบับในส่วนของ CSS ที่มีการสอบถามมา

<style type="text/css">
#navigation {
 width: 200px;
}
#navigation ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
#navigation li{
 border-bottom: 1px solid #ED9F9F;
}
#navigation li a:link, #navigation li a:visited{
 font-family:tahoma;
 font-size: 80%;
 display: block;
 padding: 5px 5px 5px 5px;
 border-left: 10px solid #711515;
 border-right: 1px solid #711515;
 background-color: #B51032;
 Color: #FFFFFF;
 text-decoration: none;
}
#navigation a:hover{
 background-color:#711515;
 color:#FFFFFF;
}
</style>

ปัญหามันอยู่อีตรงส่วนสีแดงนั่นแหละครับ เนื่องจากเป็นการกำหนดไปในแต่ละกรณี คือ a:link และ a:visited บราวเซอร์มันเลยปฏิบัติไปตามที่กำหนด โดยที่ a:visited มันมีความสำคัญสูงกว่า a:hover และ a:link มันเลยไม่กลับไปแสดงทั้ง 2 ส่วน (สังเกตุได้จากในสภาวะปกติ ลิงค์ที่ถูกคลิกจะเปลี่ยนสีเป็นสีน้ำเงินแล้วไม่เปลี่ยนกลับไปอีก)

การแก้ไขก็แค่อย่าไปกำหนดแยกกันครับ ให้กำหนด Style รวมๆกันไปทีเดียวเลย ด้วยการใช้แค่ื a เฉยๆ ดังโค้ดด้านล่าง
#navigation li a{
 font-family:tahoma;
 font-size: 80%;
 display: block;
 padding: 5px 5px 5px 5px;
 border-left: 10px solid #711515;
 border-right: 1px solid #711515;
 background-color: #B51032;
 Color: #FFFFFF;
 text-decoration: none;
}

CSS

Relate

^