標籤

｜CSS｜Focus Effect with :has(:hover)

Focus Effect with :has(:hover)

本篇將介紹如何利用 CSS 的 :has() 選擇器，製作一個在滑鼠懸停時自動聚焦的卡片特效。不需依賴 JavaScript，即可實現簡潔高效的互動設計。

以下是卡片 html 部分，整體結構以 <ul> 為容器，內含數個 <li> 作為卡片項目。每張卡片內包含背景圖層、遮罩層、內容區塊及按鈕。

html

    
    
  • 
          
    
          
    
          
    Card A
    
          
    
                
    
                  
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    
                  
                
    
          
    
          
          
    
          
    
          
    
          
    
    
    • 
    
  • 
          
    Card B
    
          
    
                
    
                  
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    
                  
                
    
          
    
          
    
          
    
          
    
          
    
          
    
          
    
          
    
    
    • 
    
  • 
          
    Card C
    
          
    
                
    
                  
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    
                  
                
    
          
    
          
    
          
    
          
    
          
    
          
    
          
    
          
    
    
    • 
    
  • 
          
    Card D
    
          
    
                
    
                  
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    
                  
                
    
          
    
          
    
          
    
          
    
          
    
          
    
          
    
          
    
    
    •

CSS 實作，聚焦效果的核心，僅需兩段簡單的 CSS：

css
ul.card-list:has(li:hover) li:hover{ justify-content:center; margin-inline:min(1.85vw, 0.7rem); transform:scale(1.06); filter:drop-shadow(0px 0px 20px var(--drop-shadow-focus)) brightness(1.1); cursor:pointer; z-index:5;}

ul.card-list:has(li:hover) li:not(:hover){ margin-inline:min(0.6vw, 0.18rem); filter:grayscale(65%) brightness(0.92) blur(0px); transform:scale(0.98); 
                                           transform-origin:center;
                                          }

這樣的設定能夠自然地將使用者的視覺集中於互動對象，並減少其他元素的干擾。

  • ul.card-list:has(li:hover)：
    :has(li:hover) 確保當 ul.card-list 列表中有任一個 .card-item 被 hover 時，才觸發卡片樣式變更。
  • ul.card-list:has(li:hover) li:hover：
    針對目前被懸停的卡片，套用放大、變亮，並發光暈，使其從整體中突顯出來。
  • ul.card-list:has(li:hover) li:not(:hover)：
    :not() 是用來排除符合條件的元素。在這裡，代表「所有沒有被滑鼠懸停的卡片」，這些卡片會微微縮小、降低飽和度與亮度，進一步凸顯當前聚焦的卡片。
標籤：