Mousover链接缩略图分解列表 [英] Mousover link thumbnail breaks list up
问题描述
我有一个链接列表，隐藏（调整大小）缩略图隐藏在
链接旁边。完整的html& css在这篇文章的末尾。
链接的CSS在a：hover上调整图像大小。一切都很好，
除了列表调整大小以容纳图像，因此撕毁
列表。在某些浏览器中，缩略图和调整大小效果会来回移动
真快（尝试鼠标移动另一页链接）。
我试过限制列出项目高度，但是当你需要在列表项上需要多行文本时，这不起作用，这经常发生。
我还尝试了几种组合的位置和显示，但
无法解决这个问题。
关于如何呈现缩略图以使列表不会出现的任何想法
调整大小，但相对于列表缩略图仍然显示？我不是b $ b。 BTW，没有javascript，只有CSS。
HTML示例：
< html>< head>
< style type =" text / css">
ul {width：250px; }
li a img {
身高：0;
宽度：0;
border -width：0;
}
li a：hover img {
position：relative;
身高：80px;
宽度：80px;
左：250px;
边框：1px黑色实体;
}
< / style>
< / head>
< body>
< h4>列表菜单项< / h4>
< ul>
< li>< a href =" page1.html"> ;正面有很多文字链接< img
src =" img / page1-icon.jpg" alt =" icon">< / a>< / li>
< li>< a href =" page2.html">另一页< img src =" ; img / page2-icon.jpg"
alt =" icon">< / a>< / li>
< li>< a href =" page3.html">还有另一个页面，其链接必须是
Wrapped< img src =" img / page3-icon.jpg" alt =" icon">< / a>< / li>
< / ul>
< / body>< / html>
Casimir Pohjanraito写道：
我有一个链接列表，带有缩略图图片隐藏（调整大小）
链接旁边。在这篇文章的末尾完成html& css。
看起来不完整。 URL通常更好。
>
链接的CSS会在a：hover上调整图像大小。一切都很好，
除了列表调整大小以容纳图像，因此撕毁
列表。在某些浏览器中，缩略图和调整大小效果来回快速实现快速（尝试鼠标移动另一个页面链接）。
URL可以帮助我们尝试任何鼠标悬停。在我的新闻阅读器中
没有任何反应。 ;-)
>
li a img {
height：0;
更改为高度：80px;
width：0;
更改为宽度：80px;
border-width：0;
添加可见性：隐藏;
}
li a：hover img {
位置：相对;
身高：80px;
宽度：80px;
左：250px;
边框：1px黑色实心;
添加可见性：可见;
}
未经测试。 HTH。
-
John
文章< f3 ********* *@nyytiset.pp.htv.fi>，
Casimir Pohjanraito< pi ************ @ welNOSPMAMho.comwrote：
我有一个链接列表，隐藏（调整大小）缩略图隐藏在
链接旁边。在这篇文章的末尾完成html& css。
....
我还尝试了几种位置和显示组合但是
无法解决这个问题。
关于如何呈现缩略图的任何想法，以便列表不会重新调整大小，但缩略图仍然是显示，相对于列表？我不是b $ b。顺便说一下，没有javascript，只有CSS。
HTML示例：
我不会这样做。没有这种噱头，生活会更甜美。但是
你将通过添加
display：block;来消除下划线的丑陋。
你也可以尝试而不是相对定位，
类似于：
li a：悬停img {
位置：绝对;
身高：80px;
宽度：80px;
left：350px;
top：50px;
border：1px black solid;
}
这解决了列表项问题的扩展。
-
dorayme
< blockquote>文章< 46 ********** @ news.bluewin.ch>，
John Hosking< Jo ** @ DELETE.Hosking.name.INVALIDwrote：
Casimir Pohjanraito写道：
我有一个链接列表，隐藏了缩略图（调整大小）
旁边的链接。在这篇文章的末尾完成html& css。
链接的CSS在a：hover上调整图像大小。一切都很好，
除了列表调整大小以容纳图像，因此撕毁
列表。在某些浏览器中，缩略图和调整大小效果来回快速实现快速（尝试鼠标移动另一个页面链接）。
li a img {
height： 0;
更改为高度：80px;
width：0;
更改为宽度：80px;
border-width：0;
添加可见性：隐藏;
}
li a：hover img {
位置：相对;
身高：80px;
宽度：80px;
左：250px;
边框：1px黑色实心;
添加可见性：可见;
}
未经测试。 HTH。
有趣的想法，但给出了一个可怕的结果并且解决了没有
的差距问题。
-
dorayme
I have a list of links, with a thumbnail image hidden(resized) next to
the link. Complete html&css at end of this post.
CSS for the link resizes the image on a:hover. All is good,
except the list resizes to accomodate the image, thus "tearing up" the
list. In some browsers the thumbnail and resize effect goes back and forth
real fast (try mouseovering the "another page" link).
I tried constraining the list item height, but that doesnt work when you
need multiple lines of text on the list item, as often happens.
I also experimented with several combinations of position and display but
couldnt solve this.
Any ideas on how to present the thumbnail so that the list wont be
resized, but that the thumbnail still shows up, relative to the list? I
dont. BTW, no javascript, only CSS.
HTML EXAMPLE:
<html><head>
<style type="text/css">
ul { width: 250px; }
li a img {
height: 0;
width: 0;
border-width: 0;
}
li a:hover img {
position: relative;
height: 80px;
width: 80px;
left: 250px;
border: 1px black solid;
}
</style>
</head>
<body>
<h4>List Menu Thing</h4>
<ul>
<li><a href="page1.html">Front Page With Lots Of Text In Link<img
src="img/page1-icon.jpg" alt="icon"></a></li>
<li><a href="page2.html">Another page<img src="img/page2-icon.jpg"
alt="icon"></a></li>
<li><a href="page3.html">Yet Another Page With A Link That Must Be
Wrapped<img src="img/page3-icon.jpg" alt="icon"></a></li>
</ul>
</body></html>
Casimir Pohjanraito wrote:I have a list of links, with a thumbnail image hidden(resized) next to
the link. Complete html&css at end of this post.Doesn''t look _that_ complete. A URL is usually better.
>
CSS for the link resizes the image on a:hover. All is good,
except the list resizes to accomodate the image, thus "tearing up" the
list. In some browsers the thumbnail and resize effect goes back and forth
real fast (try mouseovering the "another page" link).A URL helps any mouseovering we may want to try. In my newsreader
nothing happens. ;-)
>
li a img {
height: 0;change to height: 80px;
width: 0;change to width: 80px;
border-width: 0;add visibility: hidden;
}
li a:hover img {
position: relative;
height: 80px;
width: 80px;
left: 250px;
border: 1px black solid;add visibility: visible;
}Untested. HTH.
--
John
In article <f3**********@nyytiset.pp.htv.fi>,
Casimir Pohjanraito <pi************@welNOSPMAMho.comwrote:
I have a list of links, with a thumbnail image hidden(resized) next to
the link. Complete html&css at end of this post.....
I also experimented with several combinations of position and display but
couldnt solve this.
Any ideas on how to present the thumbnail so that the list wont be
resized, but that the thumbnail still shows up, relative to the list? I
dont. BTW, no javascript, only CSS.
HTML EXAMPLE:
I would not do this. Life is sweeter without this gimmickery. But
you will get rid of an ugliness with the underlining by adding
display: block; to your li a img
And you might as well try instead of relative positioning,
something like:
li a:hover img {
position: absolute;
height: 80px;
width: 80px;
left: 350px;
top: 50px;
border: 1px black solid;
}
This gets rid of the expansion of the list items problem.
--
dorayme
In article <46**********@news.bluewin.ch>,
John Hosking <Jo**@DELETE.Hosking.name.INVALIDwrote:
Casimir Pohjanraito wrote:I have a list of links, with a thumbnail image hidden(resized) next to
the link. Complete html&css at end of this post.
CSS for the link resizes the image on a:hover. All is good,
except the list resizes to accomodate the image, thus "tearing up" the
list. In some browsers the thumbnail and resize effect goes back and forth
real fast (try mouseovering the "another page" link).
li a img {
height: 0;
change to height: 80px;
width: 0;
change to width: 80px;
border-width: 0;
add visibility: hidden;
}
li a:hover img {
position: relative;
height: 80px;
width: 80px;
left: 250px;
border: 1px black solid;
add visibility: visible;
}
Untested. HTH.Interesting thoughts, but gives a ghastly result and solves not
the gap problem.
--
dorayme
这篇关于Mousover链接缩略图分解列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
