Как изменить элемент при наведении курсора, не изменяя интервал внутри?

Question

У меня есть простой html-код, и я хочу изменить тег h3 на: hover, но без какого-либо влияния на интервал внутри него.

Я попытался установить H3: наведите курсор на текст-украшение: подчеркивание и H3: диапазон наведения на текст-украшение: нет, но он все еще подчеркивает пролет.

h3 span { 
 
    color: #676767; 
 
    padding-left: 10px; 
 
} 
 

 
h3 { 
 
    font: 22px/26px Arial, Helvetica, sans-serif; 
 
    color: #ee0000; 
 
    margin: 10px 0; 
 
} 
 

 
.content:hover h3 { 
 
    text-decoration: underline; 
 
    cursor: pointer; 
 
} 
 

 
.content:hover h3 span { 
 
    padding-left: 20px; 
 
    text-decoration: none; 
 
}

<div class="content"> 
 
    <h3>Some H3 title<span class='arrow'>></span></h3> 
 
</div>

Почему и что это лучший способ, чтобы обойти?

Answer 1

попробуйте это !!!

h3 span { 
 
    color: #676767; 
 
    padding-left: 10px; 
 
} 
 

 
h3 { 
 
    font: 22px/26px Arial, Helvetica, sans-serif; 
 
    color: #ee0000; 
 
    margin: 10px 0; 
 
} 
 

 
.content:hover h3 { 
 
    text-decoration: underline; 
 
    cursor: pointer; 
 
} 
 

 
.content:hover h3 span { 
 
    padding-left: 20px; 
 
    text-decoration: none; 
 
    display:inline-block; 
 
}

<div class="content"> 
 
    <h3>Some H3 title<span class='arrow'>></span></h3> 
 
</div>

Answer 2

Просто оберните внутренний текст в промежутке и дайте ему класс.

h3 span { 
 
    color: #676767; 
 
    padding-left: 10px; 
 
} 
 

 
h3 { 
 
    font: 22px/26px Arial, Helvetica, sans-serif; 
 
    color: #ee0000; 
 
    margin: 10px 0; 
 
} 
 

 
.content:hover h3 span.text { 
 
    text-decoration: underline; 
 
    cursor: pointer; 
 
} 
 

 
.content:hover h3 span.arrow { 
 
    padding-left: 20px; 
 
}

<div class="content"> 
 
    <h3><span class="text">Some H3 title</span><span class='arrow'>></span></h3> 
 
</div>

Answer 3

В вашем случае, вы можете стиль пядь специально, чтобы никогда не подчеркивание:

h3 span { 
    text-decoration:none !important; 
} 

Answer 4

Используйте другой <span> для текста, например:

<div class="content"> 
    <h3><span class="text">Some H3 title</span><span class='arrow'>></span></h3> 
</div> 

Затем примените текст-украшение на .text только.

Посмотри на ниже фрагменте коды:

h3 .arrow { 
 
    color: #676767; 
 
    padding-left: 10px; 
 
} 
 

 
h3 .text { 
 
    font: 22px/26px Arial, Helvetica, sans-serif; 
 
    color: #ee0000; 
 
    margin: 10px 0; 
 
} 
 

 
h3 .text { 
 
    color: red; 
 
} 
 

 
.content h3 { 
 
    cursor: pointer; 
 
} 
 

 
.content:hover h3 .text { 
 
    text-decoration: underline; 
 
    cursor: pointer; 
 
} 
 

 
.content:hover h3 .arrow { 
 
    padding-left: 20px; 
 
    text-decoration: none; 
 
}

<div class="content"> 
 
    <h3><span class="text">Some H3 title</span><span class='arrow'>></span></h3> 
 
</div>

Надеется, что это помогает!

Answer 5

Ответ обновлен

Вы можете установить поверочного элемент display: inline-block, и он не будет принимать на эффект парения.

Как это:

h3 span { 
 
    color: #676767; 
 
    padding-left: 10px; 
 
    display: inline-block; 
 
} 
 

 
h3 { 
 
    font: 22px/26px Arial, Helvetica, sans-serif; 
 
    color: #ee0000; 
 
    margin: 10px 0; 
 
} 
 

 
.content:hover h3{ 
 
    text-decoration: underline; 
 
    cursor: pointer; 
 
} 
 

 
.content:hover span { 
 
    padding-left: 20px; 
 
}

<div class="content"> 
 
    <h3>Some H3 title<span class="arrow">></span></h3> 
 
</div>

Благодаря Andi за указание на это в комментарии ниже.