将悬停限制在文本宽度

Question

我有这些文本，我向它们添加了 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>

Answer 1

.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>

Answer 2

将每个元素包裹在 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>

Answer 3

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

见jsfiddle

将悬停限制在文本宽度

Limit hover to the text width

html

css

hover