将鼠标悬停限制为文本宽度

Question

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

jsFiddle

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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