Khi di chuột qua mục danh sách CSS, hãy thay đổi mục CSS

Question

Tôi có danh sách UL đơn giản, khi bạn di chuột qua mục danh sách More trong HTML bên dưới, nó sẽ ẩn menu con của nó và hiển thị nó.

Điều tôi cần làm là thay đổi CSS của CSS thực tế More khi menu con được hiển thị và di chuột.

Vì vậy, nếu bạn di chuột qua More menu con sẽ hiển thị, sau đó bạn di chuột qua menu con đó. Tại thời điểm này, tôi cần phải thay đổi CSS của phụ huynh của menu con này sẽ là menu có More làm văn bản của nó.

Nếu bạn biết cách thực hiện điều này mà không có Javascript, tôi rất muốn biết .. Có thể thậm chí không thể không có JS?

<div id="nav-wrapper"> 
     <ul> 

      <li><a href="">Link</a></li> 

      <li><a href="">Link 5</a></li> 

      <li><a href="">More</a> 
       <ul> 
        <li><a href="">Sub Link 1</a></li> 
        <li><a href="">Sub Link 2</a></li> 
        <li><a href="">Sub Link 3</a></li> 
        <li><a href="">Sub Link 4</a></li> 
        <li><a href="">Sub Link 5</a></li> 
       </ul> 
      </li> 

     </ul> 
    </div> 

CSS

<style type="text/css" media="screen"> 
#nav-wrapper ul { 
    position:relative; 
    width: 700px; 
    float: right; 
    margin: 0; 
    list-style-type: none; 
} 
#nav-wrapper ul li { 
    vertical-align: middle; 
    display: inline; 
    margin: 0; 
    color: black; 
    list-style-type: none; 
} 
#nav-wrapper ul li a { 
    text-decoration: none; 
    white-space: nowrap; 
    line-height: 45px; 
    font-size: 13px; 
    color: #666; 
    padding: 5px 15px; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
} 
#nav-wrapper ul li a:hover { 
    color: #fff; 
    background-color: #4caef2; 
} 
#nav-wrapper ul li a:visited { 
    color: #666; 
} 

/* Hide Sub-menus */ 
#nav-wrapper ul ul{ 
    display: none; 
} 
/* SHOW Sub-menus on HOVER */ 
#nav-wrapper ul li:hover ul{ 
    display: block; 
    margin:-10px 0 0 0; 
    padding:0px 20px 20px 20px; 
    border-color:#fff; 
    border:1px; 
    border-style:solid; 
    background:#FFF; 
    position:absolute; 

    top:45px; 
    right: 320px; 
    width: 420px; 
} 

</style> 

Answer 1

Vâng, mặc dù những câu trả lời khác nói, đây là một cách lén lút khi sử dụng nó bằng cách sử dụng adjacent selector.

HTML:

<ul> 
    <li> 
     <ul> 
      <li>Sub Link 1</li> 
      <li>Sub Link 2</li> 
      <li>Sub Link 3</li> 
     </ul> 
     <a href="#">Menu</a> 
    </li> 
</ul> 

CSS:

* { 
    margin: 0; 
    padding: 0; } 
ul { list-style: none; } 
ul > li { position: relative; } 
ul li a { 
    height: 16px; 
    display: block; } 
ul ul { 
    position: absolute; 
    top: 16px; 
    left: 0; 
    cursor: pointer; 
    display: none; } 
ul li:hover ul { display: block; } 
ul ul:hover + a { color: red; } 

Preview: http://jsfiddle.net/Wexcode/YZtgL/

Answer 2

Bạn không thể chọn các yếu tố cha mẹ trong CSS. Bạn sẽ cần javascript/jQuery để thực hiện những gì bạn muốn.

CSS3 selectors...

Answer 3

Không thể chọn phụ huynh của phần tử sử dụng CSS. Bạn sẽ phải sử dụng các thư viện JavaScript hoặc JavaScript như jQuery để thực hiện điều này.

Điều này có thể giúp bạn. Complex CSS selector for parent of active child

Answer 4

Cũ câu hỏi và câu trả lời được chấp nhận là thông minh. Nhưng điều này là khá tầm thường để đạt được, chỉ với một thay đổi duy nhất trong CSS của bạn từ:

#nav-wrapper ul li a:hover 

tới:

#nav-wrapper ul li:hover>a 

này sẽ không làm việc trong IE6 (trình duyệt mà chỉ hiểu lơ lửng phong cách trên neo). Nhưng sau đó cũng không chọn bộ chọn tổ hợp anh chị em liền kề (+).

Xem this jsFiddle cho việc sửa chữa trong hành động

Answer 5

Các giải pháp của @CherryFlavourPez trên công trình. Lý do tại sao nó hoạt động không được giải thích rõ ràng mặc dù. Lưu ý rằng li phần tử (một với dòng chữ "More") là một mẹ của menu con (các ul với năm li yếu tố trong nó). Phần tử a là một (liền kề) anh chị em của menu phụ.Vì vậy, khi bạn đang di chuột qua menu phụ, bạn thực sự vẫn đang di chuột qua phần tử cha li.