Limit Hover auf die Textbreite

Ich habe diese Texte, die ich hinzugefügt zu ihnen, aber ich möchte die Grenze (border: 2px solid grey) um den Text und nicht die gesamte Box begrenzt werden, wie ist es möglich?Limit Hover auf die Textbreite

jsFiddle

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

Quelle

2016-04-28 reshad

Sie Kind-Element und legen Sie schweben Stil für das erstellen müssen. Hier ist der Link https://jsfiddle.net/6oy5s7kc/ –

@ VijayBaskaran Vielen Dank für Ihre Antwort :) – 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>

Quelle

2016-04-28 08:18:27 bklups

Wrap jedes Element in span und anzuwenden Grenze auf dieses Element.

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

Quelle

2016-04-28 08:19:09 Justinas

Dank dieser einen bevorzuge ich die meisten. – reshad

nur ein Problem ist, dass jetzt die ganze Zeile anklickbar ist – reshad

@reshad Move 'Cursor: Zeiger' zu 'span' – Justinas

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

Siehe jsfiddle

Quelle

2016-04-28 08:20:10 d4rty

Limit Hover auf die Textbreite

Antwort

Verwandte Themen