限制悬停在文本宽度

我有这些文本，我向它们添加了hover，但我希望边框（border: 2px solid grey）限制在文本周围，而不是整个框，它怎么可能？限制悬停在文本宽度

.eachTitle { 
 
    text-align: left; 
 
    font-size: 50px; 
 
    font-family: "riesling"; 
 
    color: #80FF00; 
 
} 
 

 
.eachTitle:hover { 
 
    border: 2px solid grey; 
 
    cursor: pointer; 
 
}

<div class="eachTitle" id="menu">Our Menu</div> 
 
<div class="eachTitle" id="gallery" style="margin-left: 80px;">Gallery</div> 
 
<div class="eachTitle" id="map" style="margin-left: 160px;">Where are we?</div> 
 
<div class="eachTitle" id="about" style="margin-left: 240px;">About us</div>

来源

2016-04-28 reshad

您需要创建为子元素，并设置悬停风格。这里是链接https://jsfiddle.net/6oy5s7kc/ –

@VijayBaskaran感谢您的回复:) – reshad

.eachTitle { 
 
    text-align: left; 
 
    font-size: 50px; 
 
    font-family: "riesling"; 
 
    color: #80FF00; 
 
} 
 

 
.hoverspan:hover { 
 
    border: 2px solid grey; 
 
    cursor: pointer; 
 
}

<div class="eachTitle" id="menu"><span class="hoverspan">Our Menu</span></div> 
 
<div class="eachTitle" id="gallery" style="margin-left: 80px;"><span class="hoverspan">Gallery</span></div> 
 
<div class="eachTitle" id="map" style="margin-left: 160px;"><span class="hoverspan">Where are we?</span></div> 
 
<div class="eachTitle" id="about" style="margin-left: 240px;"><span class="hoverspan">About us</span></div>

来源

2016-04-28 08:18:27 bklups

裹每个元素span和适用边界到该元素。

.eachTitle { 
 
    text-align: left; 
 
    font-size: 50px; 
 
    font-family: "riesling"; 
 
    color: #80FF00; 
 
    cursor: pointer; 
 
} 
 
.eachTitle span { 
 
    border: 2px solid transparent; 
 
} 
 
.eachTitle:hover span { 
 
    border-color: grey; 
 
}

<div class="eachTitle" id="menu"><span>Our Menu</span> 
 
</div> 
 
<div class="eachTitle" id="gallery" style="margin-left: 80px;"><span>Gallery</span> 
 
</div> 
 
<div class="eachTitle" id="map" style="margin-left: 160px;"><span>Where are we?</span> 
 
</div> 
 
<div class="eachTitle" id="about" style="margin-left: 240px;"><span>About us</span> 
 
</div>

来源

2016-04-28 08:19:09 Justinas

感谢这一个我最喜欢的。 – reshad

只是一个问题是，现在整条线是可点击的 – reshad

@reshad将'cursor：pointer'移动到'span' – Justinas

<div id="menu"><span class="eachTitle">Our Menu</span></div>

见jsfiddle

来源

2016-04-28 08:20:10 d4rty

限制悬停在文本宽度

回答

相关问题