CSS text hover подчеркивание анимации внутри div

Я пытаюсь оживить подчеркивание слова на моей веб-странице. Он работает, но подчеркивание показывает под div, что текст внутри. Вы можете видеть на фрагменте, что div должен заполнить весь экран, но теперь вам нужно прокрутить вниз, чтобы увидеть подчеркивание. Как я могу показать это прямо под текстом?CSS text hover подчеркивание анимации внутри div

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
div { 
 
    width: 50%; 
 
    height: 100vh; 
 
    text-align: center; 
 
    line-height: 100vh; 
 
    font-size: 150%; 
 
    top: 0; 
 
    -webkit-transition: font-size 0.5s; 
 
    -moz-transition: font-size 0.5s; 
 
    -o-transition: font-size 0.5s; 
 
    transition: font-size 0.5s; 
 
} 
 
div:hover { 
 
    font-size: 200%; 
 
} 
 
a { 
 
    display: inline-block; 
 
    position: relative; 
 
    padding-bottom: 3px; 
 
} 
 
a:after { 
 
    content: ''; 
 
    display: block; 
 
    margin: auto; 
 
    height: 3px; 
 
    width: 0px; 
 
    background: transparent; 
 
    transition: width .5s ease, background-color .5s ease; 
 
} 
 
a:hover:after { 
 
    width: 100%; 
 
    background: blue; 
 
}

<div style="background-color: rgb(64, 64, 64); color: rgb(255, 255, 255); float: left;"> 
 
    <a>Webpage</a> 
 
</div> 
 
<div style="background-color: rgb(255, 255, 255); color: rgb(64, 64, 64); float: right;"> 
 
    <a>Photos</a> 
 
</div>

источник

2017-01-04 Tamas Koos

Высота строки анкеров изменяется в родительском.

Восстановить его по умолчанию

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
div { 
 
    width: 50%; 
 
    height: 100vh; 
 
    text-align: center; 
 
    line-height: 100vh; /* this value is inherited by the a */ 
 
    font-size: 150%; 
 
    top: 0; 
 
    -webkit-transition: font-size 0.5s; 
 
    -moz-transition: font-size 0.5s; 
 
    -o-transition: font-size 0.5s; 
 
    transition: font-size 0.5s; 
 
} 
 
div:hover { 
 
    font-size: 200%; 
 
} 
 
a { 
 
    display: inline-block; 
 
    position: relative; 
 
    padding-bottom: 3px; 
 
    line-height: initial; /* added */ 
 
} 
 
a:after { 
 
    content: ''; 
 
    display: block; 
 
    margin: auto; 
 
    height: 3px; 
 
    width: 0px; 
 
    background: transparent; 
 
    transition: width .5s ease, background-color .5s ease; 
 
} 
 
a:hover:after { 
 
    width: 100%; 
 
    background: blue; 
 
}

<div style="background-color: rgb(64, 64, 64); color: rgb(255, 255, 255); float: left;"> 
 
    <a>Webpage</a> 
 
</div> 
 
<div style="background-color: rgb(255, 255, 255); color: rgb(64, 64, 64); float: right;"> 
 
    <a>Photos</a> 
 
</div>

источник

2017-01-04 20:32:24 vals

Хотелось бы узнать причину этого. – xxCodexx

@xxCodexx У div есть высота линии 100vh. А находится внутри div, поэтому этот параметр ** каскадирует ** к нему, и поскольку он имеет огромное значение, он устанавливает поддельную подчеркивание очень низко. Просто установите его снова на * initial *, чтобы восстановить исходное значение. – vals

Вместо того чтобы использовать кронштейн, я бы поставил DIV внутри него.

<div style="background-color: rgb(255, 255, 255); color: rgb(64, 64, 64); float: right;"><div id="hoverDiv">Photos</div></div>

, а затем в CSS, вы просто показываете нижнюю границу div в синем на зависании.

Извините, у меня нет времени, чтобы выполнить весь код, но это первый проект ... надеюсь, что это может дать вам хорошую идею!

источник

2017-01-04 20:28:31 Helpha

Это не работает таким образом тоже. –

Не хочешь спорить с тобой, но мне любопытно узнать, почему это не так? – Helpha

Вы можете попробовать это для себя с помощью фрагмента. Подчеркивание все еще отображается под основным div. –

вы можете использовать гибкий и фон-размер:

body { 
 
    margin: 0; 
 
    height: 100vh; 
 
    display: flex; 
 
} 
 
div { 
 
    flex: 1; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
a { 
 
    padding-bottom: 3px; 
 
    background: linear-gradient(to left, currentcolor, currentcolor) bottom center no-repeat; 
 
    transition: 0.5s; 
 
    background-size: 0 3px; 
 
} 
 
a:hover { 
 
    background-size: 100% 3px; 
 
}

<div style="background-color: rgb(64, 64, 64); color: rgb(255, 255, 255); "><a>Webpage</a> 
 
</div> 
 
<div style="background-color: rgb(255, 255, 255); color: rgb(64, 64, 64); "><a>Photos</a> 
 
</div>

вы можете также нам е дисплей: таблица

html { 
 
    margin: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
html { 
 
    display: table; 
 
    table-layout: fixed; 
 
} 
 
body { 
 
    display: table-row; 
 
} 
 
div { 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 
a { 
 
    padding-bottom: 3px; 
 
    background: linear-gradient(to left, currentcolor, currentcolor) bottom center no-repeat; 
 
    transition: 0.5s; 
 
    background-size: 0 3px; 
 
} 
 
a:hover { 
 
    background-size: 100% 3px; 
 
}

<div style="background-color: rgb(64, 64, 64); color: rgb(255, 255, 255); "><a>Webpage</a> 
 
</div> 
 
<div style="background-color: rgb(255, 255, 255); color: rgb(64, 64, 64); "><a>Photos</a> 
 
</div>

как пример можно использовать псевдо :after если вы поворачиваете <a> в inline-block элемент

источник

2017-01-04 20:33:54

CSS text hover подчеркивание анимации внутри div

ответ

Смежные вопросы