Как изменить размер текста при наведении, не нажимая окружения (HTML / CSS - без JavaScript) - PullRequest
Новая
       49

Как изменить размер текста при наведении, не нажимая окружения (HTML / CSS - без JavaScript)

1 голос
/ 26 мая 2011

Пример: http://jsfiddle.net/rXf4U/5/

Не думаю, что смогу объяснить это лучше, чем в заголовке, но пример должен быть достаточно понятен.

У меня есть конечное пространство, заполненное тегами, словами или чем-то еще. Чтобы освободить место для большего, я уменьшил размер текста, но затем хочу, чтобы он был действительно читабельным при наведении. Это легко увидеть из примера, в котором проблема заключается.

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

Пример: http://jsfiddle.net/rXf4U/17/

Так как это не новая концепция, я уверен, что просто не смогут найти правильный поисковый запрос, но я все равно застрял;)

Надеюсь, вы направите меня в правильном направлении.

С уважением.

Важное редактирование: Конечно, тег li будет содержать ссылку: 

<ul>
  <li><a href="#">keyword</a></li>
  <li><a href="#">keyword</a></li>
  <li><a href="#">keyword</a></li>
  <li><a href="#">keyword</a></li>
  ...
</ul>

Я надеюсь, что это сделает более "возможным" обойтись без JavaScript.

Извините за провал.

Ответы [ 2 ]

2 голосов
/ 26 мая 2011

Вы можете использовать переполнение hidden, whitespace: nowrap, и каждый элемент li должен находиться на разных строках.См. this для примера.

1 голос
/ 26 мая 2011

Это как бы возможно. Но это в меру хакерский характер (и относительно хрупкий, учитывая реализации в браузере псевдоэлемента :after), а также добавление атрибута title к элементам li для создания разметки: 

<ul>
    <li title="picnic">picnic</li>
    <li title="webprogramming">webprogramming</li>
    <li title="scripting">scripting</li>
    <li title="stylesheet">stylesheet</li>
    <li title="jsfiddle">jsfiddle</li>
    <li title="stackoverflow">stackoverflow</li>
    <li title="moonwalker">moonwalker</li>
    <li title="powertools">powertools</li>
    <li title="mastermind">mastermind</li>
    <li title="chicken">chicken</li>
</ul>

и следующий CSS: 

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    height: 100px;
    width: 100px;
}
li {
    display: inline-block;
    position: relative;
    font-size: 10px;
}
li:hover:after {
    color: #f00;
    font-weight: bold;
    content: attr(title);
    position: absolute;
    top: 0;
    left: 0;
    font-size: 20px;
    background-color: #fff;
    border: 1px solid #f90;
}

JS Fiddle demo .

...