css 或 js 锚定图像翻转, "glued to background"影响窗口调整大小

标签 css image rollover

几天来我一直在尝试创建它,但没有 100% 的工作结果。我想为我的网站制作 5 个锚定图像翻转(用于导航菜单)。到目前为止,我一定已经完成了十几个教程。他们中的一些人推荐我使用 js,其他人推荐我使用 css。所有这些都产生了大部分问题。最普遍的问题是,当我制作功能性图像翻转并使用 css 定位它时,当我调整浏览器大小时,它不会与其余图像(具有“粘在背景上”的效果)成比例地平移其位置 window 。基本上我希望所有图像(包括翻转)都具有“粘在背景上”的效果。

我现在拥有的是最接近预期效果的。在 Firefox 中,翻转仅在鼠标悬停在图像顶部 25% 上方时有效,并且“粘到背景”效果不起作用。在 chrome 中,锚定翻转图像工作正常,但“粘在背景上”效果也不起作用。这是代码:

#news {
position:relative;
left:180px;
bottom:450px;
width:210px;
height:67px;
}


<div id="news" align="center">
<a href="news.html" 
onmouseover="document.news.src='newsRO.png'" 
onmouseout="document.news.src='news.png'">
<img src="news.png" name="news" width="210px" height="67"/>
</a>
</div>

这里有一个实例链接:http://www.scissormanmusic.com/index_new2.html 显然还有很多定位和内容开发我仍然需要处理网站上的其他一些元素。但是一旦我能让菜单正常运行,我应该能够将它们放在正确的位置......我想

请。任何见解将不胜感激。谢谢!!

最佳答案

还有代码要显示吗?实例?

通过猜测:在你的 anchor 上尝试display:block

关于css 或 js 锚定图像翻转, "glued to background"影响窗口调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10745313/

相关文章:

javascript - 退出全屏模式时捕获 ESC 事件

javascript - 如何在 chart.js 圆形图表中获取文本

php - 使用 Bootstrap 显示数据库中的图像

python opencv去除图像中的噪声

html - 如何根据浏览器大小缩放翻转图像

javascript - 使用动画和每个迭代动画

html - 图片 float HTML

database - 在文件系统中存储图片时,使用相对路径还是绝对路径?

html - 鼠标悬停按钮/图像未与链接对齐

javascript - 仅第一张图像的翻转效果。选择其他缩略图后取消