css html hover only on the letter/character area

Question

How can I make the hover effect work only when cursor moves on the « character? Currently hover effect is applied whenever the cursor enters the red background. I need it only to apply when the cursor is in this area:

#toolxxx {
  background-color: #FF0000;
  background-size: 10px 10px;
  z-index: 100;
  position: fixed;
  right:1;
  top: 50px;
  color: rgba(255,255,255,1);
  font-size: 50px;
}

#toolxxx:hover {
  z-index: 100;
  position: fixed;
  right:1;
  top: 50px;
  color: rgba(0,0,0,1);
  font-size: 50px;
}

<div id='toolxxx'> 
  &#171;
</div>

Answer 1

Wrap the « symbol in another block, make that block small enough and apply the :hover pseudoclass to it, not to the #toolxxx div:

#toolxxx {
  background-color: red;
  background-size: 10px 10px;
  z-index: 100;
  position: fixed;
  right:1;
  top: 50px;
  color: rgba(255,255,255,1);
  font-size: 3em;
  padding: 0.21em 0em;
}
        
#toolxxx > span {
  display: inline-block;
  line-height: 0.75em;
  max-height: 0.75em;
  overflow: hidden;
  cursor: pointer;
}

#toolxxx > span:hover {
  color: black;
}

<div id='toolxxx'> 
  <span>
    &#171;
  </span>
</div>

<div id='toolxxx'> 
  <div id='hoverarea'>
    &#171;
  </div>
</div>

However, I think this is the case where an image instead of a text symbol would be the the right choice. This character is difficult to position because letters without ascenders may have more free space above them than below them depending on the font (the selection demonstrates both cases):

Answer 2

One possible solution (although personally not my favorite as it is dependent on the text size), would be to wrap the text in a span and that span on another span that would have the same height as the character. Something like this:

#toolxxx {
    background-color: #FF0000;
    background-size: 10px 10px;
    z-index: 100;
    position: fixed;
    right:1;
    top: 50px;
    color: rgba(255,255,255,1);
    font-size: 50px;
}

#toolxxx #hoverable {
    display:inline-block;
    height:26px;
    line-height:16px;
    overflow:hidden;
    
}

#toolxxx #hoverable:hover {
    color: rgba(0,0,0,1);
}

<div id='toolxxx'> 
    <span id="hoverable">
        <span>&#171;</span>
    </span>
</div>

The problem is not as trivial as it seems, as the character « has "blank space" on top. This solution hides that blank space within the parent, but if you change the font family or size, you'll need to play with the values of height and line-height to make sure it works as expected.

Answer 3

What you need is to wrap « with other element, then apply hover action to this wrapper. For example:

<div id='toolxxx'> 
    <span>&#171;</span>
</div>

CSS hover

#toolxxx span:hover {
    color: rgba(0,0,0,1);
}

Live demo