текст с элементом div hover выталкивает текст даже после свертывания dic - PullRequest
Новая
       41

текст с элементом div hover выталкивает текст даже после свертывания dic

0 голосов
/ 25 июня 2018

У меня есть элемент div, связанный с якорным текстом, который опускается вниз, отталкивает оставшийся текст и отображает содержимое.Перемещение мыши по ссылке приводит к разрушению элемента.

Проблема в том, что текст после ссылки перемещается как при наведении на нее, так и после ее свертывания, оставляя текст с пробелами, если не будет перезагружена вся страница.В сафари это не работает, но в Chrome это работает.

Я также не могу заставить элемент div зависать над текстом, не нажимая на содержимое.Я пробовал z-index.

Фрагмент кода.Здесь, кажется, все работает нормально, но не в моем локальном веб-браузере.Я запускаю это с Джекилом.

.thumb {
    position: relative; /*used to be relative*/
    height: 100%;
    display: inline;
    overflow: auto;
    border-bottom: 1px dotted $highlight-color;
}
.thumb img {
    width: 100%;
    padding: 0;
}
.thumb > div {
    background-color: #fff;
    opacity: 0;
    position: absolute; /* used to be absolute: the box covered the link text*/
    overflow: hidden; /* hidden: removes the extra step with all the text vertical*/
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    -webkit-transition: opacity 0.3s linear;
    text-shadow: #000 0px 0px 0;
    color: $highlight-color;
}
.thumb:hover > div {
    display: inline;
    transition: all 0.3s linear;
    opacity: 1.0;
    position: relative; /*relative, absolute, relative pushes the content*/
}
.thumb > div div {
    padding: 20px 40px;
}
.thumb h2 {
    font-size: 1.2em;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 0px;
}
.thumb p {
    margin-bottom: 0px;
}
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
&nbsp;<div class="thumb"><a href="{{baseurl}}">Link text</a><div><div>
            <h2>Definition</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
        </div></div></div>&nbsp;
slkdj is het begin van de tekst na de link hover element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Перед наведением курсора (и как это должно выглядеть после разрушения элемента)
Расширение элемента Div
Текст после ссылки теперь имеет разрыв

...