I have been working on a link rollover effect for my website, to achieve the following:
┌────────────────────────────┐
│ ┌──────────────────┐ │
│ │ <a> │ │
│ └──────────────────┘ │
│ │
│ <img> │
└────────────────────────────┘
I want the background image, <img>, to appear when the mouse hovers only over the link, <a>. In other words, when the link part is hovered over, I want the image behind it to appear (or change state) without becoming "clickable" as well. And I would like to do it with only CSS.
如果<代码><a> 是<a> 是<代码>的任何地方, tag,一旦发现,整个图像即成为“可动摇的”,而B)我想使用更大规模、更优质的图像,并将图像列入超文本,避免使用Javascript或浏览器 ha在装载前。
My solution was to put the <a> and the <img> within a parent <li> (since this is essentially part of the "menu" or site navigation), and then use the adjacent sibling selector (+) to make the <img> change when the <a> is hovered over. At it s most basic, the CSS looks like this:
li {
size and position declarations; /*The size is the same as the contained image.*/
}
li a {
absolute size and position declarations for the link area;
z-index: 2; /*I use the z index to make sure the link stays above the image.*/
}
li img {
absolute size and position declarations for the image;
z-index: 1;
display: none;
li a:hover + img {
display: block;
}
而基本的超文本则认为:
<ul>
<li><a href="page.htm"> </a><img src="image.jpg"></li>
<li>...
</ul>
如果你们想看到它采取行动,我就要在www.joshuakirby.net/test上进行测试。 (作为gent子——我是自学的,我很容易承认我没有专家在ding。) 除IE外,它在我所尝试的所有主要浏览器中都发挥了巨大作用。 我不得不在任何伊埃文版本中,甚至在伊埃9版本中适当开展工作。 滚动浮标像IE6中所做的那样,连接点总是可以点击第一次甚至第二次。
是否有任何人知道,为什么教育学会会给我带来悲痛? 是否有一些固定办法使这一中心像其他浏览器一样? 或者,如果整个方法一到一来,谁会想到一种更加友好的交叉增长者,那么利用经济、社会、文化权利委员会来进行这一滚动工作?
我不是网络设计的新手,如果我需要,我也可以处理联合预算和项目。 刚刚向我发出呼吁,要求我们与特别安全局合作。 事先感谢你们的帮助!