Измените положение <a>на «абсолютное» при наведении (для отображения полной формулировки) - PullRequest
Новая
       43

Измените положение <a>на «абсолютное» при наведении (для отображения полной формулировки)

0 голосов
/ 14 марта 2011

Имеет набор ссылок в строках.

CSS: 

.table div {
    float:left;
    margin-right:5px;
    width:150px; /*width needs to be fixed, since we're limited in space*/
    white-space:nowrap;
    overflow:hidden
} 
a.trick,a.trick:link,a.trick:active,a.trick:visited {position:static}
a.trick:hover{position:absolute}

HTML: 

<div class=table>
  <div>Text here</div>
  <div><a class=trick href="#">Text here may be too long to fit</a></div>
  <div>Next column</div>
  <div>of my table made of divs</div>
</div>

Прекрасно работает в Opera и Firefox (при наведении курсора накладывается наследующий «столбец», отображающий полное содержимое).

В Chrome (Safari тоже, скорее всего) вообще не реагирует на: hover.

Любой знает способ обойти, желательно без JS /JQ (чистый CSS)?Заранее спасибо!

Ответы [ 3 ]

2 голосов
/ 14 марта 2011

Если вы можете определить на сервере максимальное количество символов, разрешенное для ссылки, вы можете использовать следующую стратегию:

CSS: 

.table div {
    float:left;
    margin-right:5px;
    width:150px;
    white-space:nowrap;
    overflow:hidden
} 
a.trick span.extendedText,
a.trick:link span.extendedText,
a.trick:active span.extendedText,
a.trick:visited span.extendedText {
    display:none;
}
a.trick:hover span.extendedText{
    display:block;
}

HTML: 

<div class=table>
    <div>Text here</div>
    <div><a class=trick href="#">Text here may <span class="extendedText">be too long to fit</span></a></div>
    <div>Next column</div>
    <div>of my table made of divs</div>
</div>
0 голосов
/ 14 марта 2011

Решено с небольшим количеством jQuery, которое: 

$('.trick').mouseover(function(){$(this).css('position','absolute');});
$('.trick').mouseout(function(){$(this).css('position','relative');});

По какой-то причине Chrome / Safari хотят получить дополнительное подтверждение того, что позиция фактически должна стать абсолютной :). Теперь работает везде (включая IE).

Спасибо за участие, и наслаждайтесь этим приятным "хаком":).

0 голосов
/ 14 марта 2011

Я не понимаю, почему вы хотите, чтобы он получил абсолютную позицию, что это имеет отношение к размеру слов и т. Д.

Хорошо, я видел, как ваш пример работает здесь http://jsfiddle.net/R6dkJ/ на firefox.

Чтобы сделать эту вещь "правильно", вы, например, должны сделать следующее: 

a.trick:hover{white-space:nowrap;}

Это дает тот же эффект.

Свойство absolute используется для позиционирования самого элемента.Конечно, вы можете использовать его для подобных хаков, чтобы получить желаемый эффект - но вы наверняка столкнетесь с несовместимостью между браузерами.

...