CODEWITHSUNDEEP
htmlcsshovermouseoverfont-size
Zacariaz
Zacariaz

Reputation: 567

How to alter text size on hover, without pushing the surroundings (html/css - no javascript)

Example: http://jsfiddle.net/rXf4U/5/

I don't think I can explain it any better than it's done in the title, but the example should be pretty self explanatory.

I have a finite about of space filled with tags, words or whatever. In order to make room for more, I've lowered the text-size, but want then to actually be readable when hovering. It is easy to see from the example wherein the problem lies.

I've tried just about everything, including a lot of searching. I've tried to use z-layers. I didn't expect it to work and of course it didn't. I've also tried various approached involving positioning, and while I have succeeded to some degree, it really is a mess.

Example: http://jsfiddle.net/rXf4U/17/

As this is not a new concept, I'm sure it's just be who are unable figure out the correct search term, but just the same, I'm stuck ;)

I do hope you'll guide me in the right direction.

Best regards.

Important edit: Of course the li tag will contain link:

<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>

I do hope this makes it more "possible" to do without JavaScript.

Sorry for the screw up.

Upvotes: 1

Views: 12815

Answers (2)

Briguy37
Briguy37

Reputation: 8402

You could use overflow hidden, whitespace: nowrap, and have each li element on different lines. See this for an example.

Upvotes: 2

David Thomas
David Thomas

Reputation: 253318

This is, sort of, possible. But it's moderately hack-ish (and relatively fragile, given browser implementations of the :after pseudo-element), and also involves you adding a title attribute to the li elements, to create this mark-up:

<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>

and the following 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.

Upvotes: 1

Related Questions