漂亮的悬停效果图像 [英] nice hover-effect for images
问题描述
亲爱的专业人士，
我如何才能在我的网页右下方的
上为图像tomasio.design实现更好的悬停效果？我正在使用类.footer a：hover
进行基于CSS的鼠标悬停效果，但这会导致图像左侧出现一个丑陋的绿色块
将鼠标指针悬停在它上面。我只想把这个图像链接到我的索引页面，没有任何鼠标悬停
效果如果可能的话。任何提示？
另外我从w3-validator收到一条错误消息，我的文件确实没有对b-html过渡进行验证。这是结果我得到了：
http://validator.w3.org/check?uri=ht...%2FUs_p12.html
所以我在这里做错了，但谷歌无法提供我有一个满意答案的
。你能吗？
第三：Firefox没有显示我的< titletags。有人知道为什么吗？
网站的一个例子可以在这里找到：
http://tomasio.at/referenzen/Us_p12.html
可以在那里找到链接的样式表：
http://tomasio.at/stylesheet3.css
提前感谢您的帮助。
亲切的问候，
-
tomasio
描述一个问题揭示了解决问题的方法。至少我希望如此。
Dear Pros,
How can I achieve a nicer hover-effect for the image tomasio.design on
the bottom-right of my webpage? I am using the class ".footer a:hover"
for a CSS-based mouseover-effect but this causes an ugly green block
to the left of the image while hovering the mousepointer over it. I
just want to link that image to my index-page, without any mouseover
effect if possible. Any hints?
Plus I get an error message from the w3-validator that my file does
not validate against X-html transitional.This is the result I got:
http://validator.w3.org/check?uri=ht...%2FUs_p12.html
So I am doing something wrong here, but google could not provide me
with satisfying answers. Can you?
Third: Firefox does not display my<titletags. Does anybody know why?
An example of the site can be found here:
http://tomasio.at/referenzen/Us_p12.html
the linked stylesheet can be found there:
http://tomasio.at/stylesheet3.css
Thank you in advance for your help.
kind regards,
--
tomasio
"Describing an issue reveals the way of solving it. At least I hope so."
推荐答案
tomasio写道：
tomasio wrote:
如何在我的网页右下方的b / b
上为图像tomasio.design实现更好的悬停效果？我正在使用类.footer a：hover
进行基于CSS的鼠标悬停效果，但这会导致图像左侧出现一个丑陋的绿色块
将鼠标指针悬停在它上面。我只想把这个图像链接到我的索引页面，没有任何鼠标悬停
效果如果可能的话。任何提示？
How can I achieve a nicer hover-effect for the image tomasio.design on
the bottom-right of my webpage? I am using the class ".footer a:hover"
for a CSS-based mouseover-effect but this causes an ugly green block
to the left of the image while hovering the mousepointer over it. I
just want to link that image to my index-page, without any mouseover
effect if possible. Any hints?
对于.footer a：链接你定义了背景颜色：
background-color：#FAFAFA;
对于图像，左边距为11px。您所看到的是
链接的背景，比
图像左侧宽11px。 （如果你的图像是透明的，你会在
整个链接上看到颜色，而不仅仅是左边的11px）
For .footer a:link you have a background-color defined:
background-color:#FAFAFA;
For the image you have a left margin of 11px. What you are seeing is
the background of the link which is 11px wider to the left than the
image. (if you image would be transparent, you''d see the colour on the
entire link, not just the 11px on the left)
Plus我从w3-validator收到一条错误消息，我的文件确实没有。
没有验证X-html过渡。这是我得到的结果：
http://validator.w3.org/ check？uri = ht ...％2FUs_p12.html
所以我在这里做错了，但谷歌无法提供给我带来满意答案的
。你能？
Plus I get an error message from the w3-validator that my file does
not validate against X-html transitional.This is the result I got:
http://validator.w3.org/check?uri=ht...%2FUs_p12.html
So I am doing something wrong here, but google could not provide me
with satisfying answers. Can you?
您在第327行的源代码中有这个：
< a href =" ../ index.html"> ;< a href =" ../ index.html">
你不能嵌套< aelements。
You are having this in the source on line 327:
<a href="../index.html"><a href="../index.html">
You can''t nest <aelements.
第三：Firefox不显示我的< titletags。有人知道为什么吗？
Third: Firefox does not display my<titletags. Does anybody know why?
你的意思是什么它没有显示出来？我的标题栏位于
的顶部，我的Firefox窗口显示tomasio.referenzen。这就是你在
< titleelement中的内容。
What do you mean it doesn''t display them? My title bar at the top of
my Firefox window shows "tomasio.referenzen". That''s what''s in your
<titleelement.
网站的一个例子可以在这里找到：
http://tomasio.at/referenzen/Us_p12.html
-
Els http：/ /locusmeus.com/
无障碍网页设计： http：// locusoptimus.com/
周五，2007年3月30日16:04:05 +0200，Els< el ********* @ tiscali.nl>
写道：
On Fri, 30 Mar 2007 16:04:05 +0200, Els <el*********@tiscali.nl>
wrote:
>对于图像，你的左边距为11px。您所看到的是
链接的背景，其左侧比
图像宽11px。 （如果你的图像是透明的，你会在
整个链接上看到颜色，而不仅仅是左边的11px）
>For the image you have a left margin of 11px. What you are seeing is
the background of the link which is 11px wider to the left than the
image. (if you image would be transparent, you''d see the colour on the
entire link, not just the 11px on the left)
谢谢，我只是将图像宽度扩展到
周围块元素的整个宽度，因此背景颜色不可见
了。
>你在第327行的源代码中有这个：
< a href =" ../ index.html">< a href =" ../ index.html">
你不能嵌套< aelements。
>You are having this in the source on line 327:
<a href="../index.html"><a href="../index.html">
You can''t nest <aelements.
该死的。有时我被代码蒙蔽了:)
damn. sometimes I''m blinded by code :)
>
>
>第三：Firefox确实不显示我的< titletags。有人知道为什么吗？
>Third: Firefox does not display my<titletags. Does anybody know why?
你的意思是什么，它没有显示出来？我的Firefox窗口顶部的标题栏显示tomasio.referenzen。这就是你的
< titleelement中的内容。
What do you mean it doesn''t display them? My title bar at the top of
my Firefox window shows "tomasio.referenzen". That''s what''s in your
<titleelement.
也许我没有说清楚：我指的是< imgtag中的
title-attribute。如果我把类似的东西放在< img
scr =" someimage.gif"宽度= QUOT; 100"高度= QUOT; 20" ALT ="图像" title =" text
，当悬停在图像上方时出现 /在< imgtag，
内，当我的
鼠标指针停留在图像上方几秒钟时，title - 属性中的文本会弹出。以下是IE所做的链接
：
http://tomasio.at/temp/title_attr.png
（弹出窗口显示在图像部分的右侧）
我我想让firefox做同样的事情，并认为在早期版本中它已经像这样，但也许我错了。
maybe I did not make myself clear enough: I was referring to the
title-attribute inside the <imgtag. if I put something like <img
scr="someimage.gif" width="100" height="20" alt="image" title="text
which appears while hovering above an image" /inside the <imgtag,
then the text inside the "title"-attribute should pop up when my
mousepointer stays above the image for a few seconds. Below is a link
what IE does:
http://tomasio.at/temp/title_attr.png
(popup appears on the right of the image-section)
I would like to make firefox do the same and thought that it has been
like this in earlier versions, but maybe I''m wrong.
tomasio写道：
tomasio wrote:
>>第三：Firefox不显示我的< titletags。有人知道为什么吗？
>>Third: Firefox does not display my<titletags. Does anybody know why?
你的意思是什么，它没有显示出来？我的Firefox窗口顶部的标题栏显示tomasio.referenzen。这就是你的
< titleelement中的内容。
What do you mean it doesn''t display them? My title bar at the top of
my Firefox window shows "tomasio.referenzen". That''s what''s in your
<titleelement.
也许我没有说清楚：我指的是< imgtag中的
title-attribute。
maybe I did not make myself clear enough: I was referring to the
title-attribute inside the <imgtag.
也许这是因为你写了< title>而不只是标题。
Maybe that''s because you wrote "<title>", and not just title.
如果我输入类似< img
scr =" someimage.gif"宽度= QUOT; 100"高度= QUOT; 20" ALT ="图像" title =" text
，当悬停在图像上方时出现 /在< imgtag，
内，当我的
鼠标指针停留在图像上方几秒钟时，title - 属性中的文本会弹出。以下是IE所做的链接
：
http://tomasio.at/temp/title_attr.png
（弹出窗口显示在图像部分的右侧）
if I put something like <img
scr="someimage.gif" width="100" height="20" alt="image" title="text
which appears while hovering above an image" /inside the <imgtag,
then the text inside the "title"-attribute should pop up when my
mousepointer stays above the image for a few seconds. Below is a link
what IE does:
http://tomasio.at/temp/title_attr.png
(popup appears on the right of the image-section)
我的firefox正好显示了这一点。
My firefox shows exactly that.
我想让firefox做同样的事情并且认为它已经是这样的b / b
在早期版本中，但也许我错了。
I would like to make firefox do the same and thought that it has been
like this in earlier versions, but maybe I''m wrong.
早期版本？你现在用的是什么版本？我有1.5.0.11，并且
标题属性显示正常。
-
Els http://locusmeus.com/
无障碍网页设计： http://locusoptimus.com/
这篇关于漂亮的悬停效果图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
