增加懸停區域

我與邊界半徑設置爲50％的小元素的網頁，讓他們顯示爲小點：增加懸停區域

CSS：

.star { 
    width: 5px; 
    height: 5px; 
    background-color: rgb(236, 236, 236); 
    position: absolute; 
    border-radius: 50%; 
    transform: scale(1); 
    display: block; 
    transition: 0.25s ease-in background-color, 0.25s ease-in opacity, 0.25s ease-out transform; 
    cursor: pointer; 
}

其中每個都有一個懸停操作，可以調出某個彈出窗口。然而，現在有一個問題，懸停（至少在我測試過的瀏覽器中）是尋找像素的遊戲。

是否有一個「技巧」添加一個不可見的邊框左右點，使他們更多的選擇而不狩獵像素？

設置border說2px solid transparent只是讓我的測試圈做大，CSS outline不會產生:hover狀態或mouseenter事件。

來源

2016-01-10 cwj

試試這個：

.star { 
 
    width: 10px; 
 
    height: 10px; 
 
    padding:10px; 
 
    background:#000; 
 
    border-radius:50%; 
 
    background-clip:content-box; /* <- key point*/ 
 
} 
 

 
.star:hover { background-color:#f00; }

<div class="star"></div>

增加填充會給你更大的打擊了利潤空間。

來源

2016-01-10 18:24:09

好答案！需要注意的是，background-clip屬性也將解決OP原始意圖上的問題（添加透明邊框，而不是添加填充） – vals

使用僞元素，增加了「災區」

body { 
 
    background: #000; 
 
} 
 

 
.star { 
 
    width: 5px; 
 
    height: 5px; 
 
    background-color: rgb(236, 236, 236); 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    border-radius: 50%; 
 
    transform: scale(1); 
 
    display: block; 
 
    transition: 0.25s ease-in background-color, 0.25s ease-in opacity, 0.25s ease-out transform; 
 
    cursor: pointer; 
 
} 
 

 
.star::before { 
 
    content: ''; 
 
    position: absolute; 
 
    border-radius: 50%; 
 
    width: 500%; 
 
    height: 500%; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    z-index:-1; 
 
    border:1px solid green; /* for demo purposes */ 
 
    
 
} 
 

 
.star:hover { 
 
    background: #f00; 
 
}

<div class="star"></div>

來源

2016-01-10 18:24:30

不是'：before'，而是':: before'，因爲它是僞元素，而不是一個僞類 –

我是老派......兩種語法都支持，但確定。 –

事實上，對IE8而言':: before'不支持 –

你的透明邊框的方法是罰款和工作在所有瀏覽器中最好的;）只需添加：

background-clip: padding-box;

確保背景不顯示在邊框下。

來源

2016-01-10 18:32:42 seahorsepip

在每顆恆星下面加上圓圈，並給它一個黑色背景ex;

<div class="starWrapper"> 
    <div class="star"></div> 
</div> 

.star { top:3px; 
     left:3px; 
     width: 5px; 
     height: 5px; 
     background-color: rgb(236, 236, 236); 
     position: absolute; 
     border-radius: 50%; 
     transform: scale(1); 
     display: block; 
     cursor: pointer;} 

.startWrapper{ 
     position:absolute; 
     background:#000; 
     width:8px; 
     height:8px; 
     border-radius: 50%;}

來源

2016-01-10 18:32:58

用肉眼看到的恆星數量約爲5,000個，您的解決方案將使DOM元素數量增加一倍。我不認爲瀏覽器會對此感到滿意。 –

僞元素方法在真正低成本的情況下做到這一點;） –

這個問題沒有提到恆星的數量，而@GCyrillus說僞元素可以以低成本解決問題。 –

增加懸停區域

回答

相關問題