CSS Positioning Mixup

У меня есть документ с заметками, который должен отображаться, когда пользователь наводил курсор на индикатор [note], не нарушая остальную часть текста. Вот мой CSS:CSS Positioning Mixup

.nb { 
 
    color: blue 
 
} 
 
.nb sup { 
 
    color: blue 
 
} 
 
.nb:hover sup { 
 
    cursor: alias 
 
} 
 
.nb:hover span.ft { 
 
    display: inline; 
 
    position: relative; 
 
    bottom: -30px; 
 
    padding: 2px; 
 
    background-color: white; 
 
    border: 2px solid black; 
 
} 
 
.ft { 
 
    display: none 
 
}

<span class='sentence'>This is a lovely sentence about nothing at all<span class='nb'><sup>[a]</sup><span class='ft'>or is there more to the story?</span></span>and I like to ramble on and on, and on.</span> 
 
<span class='sentence'>This is another nice sentence, but this one has no notes--how boring.</span>

Я хотел бы для моего ниспадающего текста, чтобы не нарушить остальную часть линии он находится на (или строки ниже него), но я не был успешный.

источник

2015-07-06 theglossy1

Работающий jsFiddle воспроизведения Ваш вопрос будет полезным – Itay

ОК, я сделал это: http://jsfiddle.net/#&togetherjs=wOucuhhugN – theglossy1

.nb { 
 
    color: blue 
 
} 
 
.nb sup { 
 
    color: blue 
 
} 
 
.nb:hover sup { 
 
    cursor: alias 
 
} 
 
.nb:hover span.ft { 
 
    display: inline; 
 
    position: absolute; 
 
    padding: 2px; 
 
    background-color: white; 
 
    border: 2px solid black; 
 
} 
 
.ft { 
 
    display: none 
 
}

<span class='sentence'>This is a lovely sentence about nothing at all<span class='nb'><sup>[a]</sup><span class='ft'>or is there more to the story?</span></span>and I like to ramble on and on, and on.</span> 
 
<span class='sentence'>This is another nice sentence, but this one has no notes--how boring.</span>

источник

2015-07-06 09:12:17 chillvivek

Что бы-решает, но это покрывает поток предложения. Я пытаюсь показать его ниже текущего предложения. – theglossy1

Почему бы вам не дать ему максимальный запас. Пример: 'margin-top: 20px;' – chillvivek

Бинго, это был недостающий кусок. Спасибо всем, у кого было такое же решение, но для margin-top: 20px comment, chillvivek получает очки. – theglossy1

.nb { 
 
    color: blue 
 
} 
 
.nb sup { 
 
    color: blue 
 
} 
 
.nb:hover sup { 
 
    cursor: alias 
 
} 
 
.nb:hover span.ft { 
 
    display : inline-block; 
 
    position : absolute; 
 
    color : black; 
 
    border : solid 1px black; 
 
    padding : 4px; 
 
    background-color : white; 
 
} 
 
.ft { 
 
    display: none 
 
}

<span class='sentence'>This is a lovely sentence about nothing at all<span class='nb'><sup>[a]</sup><span class='ft'>or is there more to the story?</span></span>and I like to ramble on and on, and on.</span> 
 
<span class='sentence'>This is another nice sentence, but this one has no notes--how boring.</span>

Использование absolute CSS позиционирование, как это будет пусть ведут себя коробки без ограничений, другие элементы.

источник

2015-07-06 09:14:49

.nb { 
 
    color: blue; position: relative; 
 
} 
 
.nb sup { 
 
    color: blue 
 
} 
 
.nb:hover sup { 
 
    cursor: alias 
 
} 
 
.nb:hover span.ft { 
 
    display: inline; 
 
position:absolute; 
 
    bottom: -30px; 
 
    padding: 2px; 
 
    background-color: white; 
 
    border: 2px solid black; 
 
} 
 
.ft { 
 
    display: none; width:190px; 
 
}

<span class='sentence'>This is a lovely sentence about nothing at all<span class='nb'><sup>[a]</sup><span class='ft'>or is there more to the story?</span></span>and I like to ramble on and on, and on.</span> 
 
<span class='sentence'>This is another nice sentence, but this one has no notes--how boring.</span>

источник

2015-07-06 09:22:19

CSS Positioning Mixup

ответ

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