Question

我正在制作一个包含翻转jpeg的网站，其中翻转是支持该网站的可点击广告。不是编码器我使用Dreamweaver的行为控件来创建javascript翻转，但js的问题是IOS和Kindle不支持它。

所以答案就是使用CSS悬停代码。我很难找到一个简单的解决方案。在这个测试页面上，最顶层的翻转“西雅图的Flealess”是用CSS代码完成的，但我包含div的原始代码并没有给div一个链接。正下方是js版本可以正常工作：

[link url = http://tailsofhollywood.com/indexcss.html] [/ link]

（它还会在悬停时忽略自定义光标更改 - 但这也是用css完成的，所以我不知道那里发生了什么。）

我需要的是页面上的所有翻转jpegs都有自己的css代码，可以使用我输入的链接，所以我可以从页面中删除有问题的js。您将给予的任何建议将不胜感激！我不是编码员 - 所以请温柔地跟我[:)]

Answer 1

http://jsfiddle.net/2Wa46/2/ - 具有CSS不透明效果的基本版本：）

<a href="http://www.google.com"><img src="http://tailsofhollywood.com/Seattle400.jpg"></a>

a         { display: block; position: relative; }
a:after   {
    display: block;
    position: absolute;
    left: 0; 
    top: 0;
    content: url(http://tailsofhollywood.com/Seattle400b.jpg);  
    opacity: 0;
    transition: opacity 0.15s ease; 
}
a:hover:after {
  opacity: 1;
  display: block;
}

css悬停图片交换和链接？

1 个答案: