Html 图像悬停仅在Google Chrome上正常工作_Html_Css_Hover

Html 图像悬停仅在Google Chrome上正常工作

html css

Html 图像悬停仅在Google Chrome上正常工作,html,css,hover,Html,Css,Hover,我制作了一个垂直图像滑块，每个图像都是一个链接，当图像悬停时，一个不透明度为0.4的黑色“玻璃窗格”覆盖图像并显示一些文本。事实上，背景是一个透明的png 问题是它只能在谷歌浏览器中正确显示歌剧院：我只看到玻璃窗，但看不到上面的文字 Firefox：我没有看到玻璃窗格，但我只看到玻璃窗格上的前两个项目的文本，第三个文本没有显示，图像之间的间距与Google Chrome和Opera显示的不同 IE：图像之间的间距与Google Chrome和Opera显示的不同，悬停什么也不做，不显示玻璃窗

我制作了一个垂直图像滑块，每个图像都是一个链接，当图像悬停时，一个不透明度为0.4的黑色“玻璃窗格”覆盖图像并显示一些文本。事实上，背景是一个透明的png

问题是它只能在谷歌浏览器中正确显示

歌剧院：我只看到玻璃窗，但看不到上面的文字
Firefox：我没有看到玻璃窗格，但我只看到玻璃窗格上的前两个项目的文本，第三个文本没有显示，图像之间的间距与Google Chrome和Opera显示的不同
IE：图像之间的间距与Google Chrome和Opera显示的不同，悬停什么也不做，不显示玻璃窗格，甚至不显示文本

google chrome中显示的内容需要在所有其他浏览器中显示

但是，这是我正在使用的html代码：

<div id="vertical_slideshowwrapper">
    <div class="vertical_slideshow" style="visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; height: 489px;">
        <ul style="margin: 0px; padding: 0px; position: relative; list-style-type: none; z-index: 1; height: 4564px; top: -1956px;">
            <li style="overflow: hidden; float: none; width: 165px; height: 489px;">
                <a href="#" target="_self">
                    <img src="images/1.png" border="0">
                    <div class="box"><p>Text 1</p></div>
                </a>
                <a href="#" target="_self">
                    <img src="images/2.png" border="0">
                    <div class="box"><p>Text 2</p></div>
                </a>
                <a href="#" target="_self">
                    <img src="images/3.png" border="0">
                    <div class="box"><p>Text 3</p></div>
                </a>
            </li>
            <li style="overflow: hidden; float: none; width: 165px; height: 489px;">
                <a href="#" target="_self">
                    <img src="images/4.png" border="0">
                    <div class="box"><p>Text 4</p></div>
                </a>
                <a href="#" target="_self">
                    <img src="images/5.png" border="0">
                    <div class="box"><p>Text 5</p></div>
                </a>
                <a href="#" target="_self">
                    <img src="images/6.png" border="0">
                    <div class="box"><p>Text 6</p></div>
                </a>
            </li>
            <li style="overflow: hidden; float: none; width: 165px; height: 489px;">
                <a href="#" target="_self">
                    <img src="images/7.png" border="0">
                    <div class="box"><p>Text 7</p></div>
                </a>
                <a href="#" target="_self">
                    <img src="images/8.png" border="0">
                    <div class="box"><p>Text 8</p></div>
                </a>
                <a href="#" target="_self">
                    <img src="images/9.png" border="0">
                    <div class="box"><p>Text 9</p></div>
                </a>
            </li>
        </ul>
    </div>
</div>

我做错了什么？任何帮助都将不胜感激

CSS验证程序结果：

只是一个建议：其他浏览器不支持一些css标签，也许你想查看一下对于IE

您查看过此链接吗？

将其放在html页面的行顶下方

<!DOCTYPE html>

您可以使用背景色而不是图像。因为你可以像你的图像一样设置背景色的透明度。将滑块的标题放入div类中，并为所需的输出写下以下代码

.你的课程
{
背景：#FDF7A6；/*设置背景颜色*/
不透明度：0.5；/*设置不透明度*/
}

还要记住设置div类的宽度、高度和位置。希望这对您有用。

正如新开发人员所说，我补充道

<!DOCTYPE html>

到我的

.box

元素没有解决问题，所以我必须找到一个解决方法

我用

填充

而不是

文本缩进

解决了这个问题：

.box {
    padding-left: 99999px;
    overflow: hidden;
}

.box:hover {
    padding-left: 0px;
}

它奏效了，这不是一个解决方案，但对我来说，这是一个很好的解决办法

感谢所有帮助过我的人

需要稍微整理一下。您有多个id=“box”的元素，这是无效的。另外，在CSS中有几个地方，

类型属性没有单位，例如#box{margin top:-163；}，这也是不正确的。检查我从w3c validator获得的链接，我在每个长度上添加了度量单位，它与0不同，从id=“box”更改为class=“box”也没有效果。我知道，但我认为我使用的是非常常见的css，IE是一种特殊情况，但我认为它应该适用于opera和firefox，但事实上它不起作用，我不明白为什么+1让mouseover与IE一起工作，但我仍然没有看到OperaSorry的文本，我没有opera测试。但我认为调整

底部：-8px值可能会对您有所帮助。这里是之前列出的所有浏览器的屏幕截图：这是在添加doctype规则之前拍摄的，opera是唯一一个在显示我的文本时出现问题的浏览器。您是否尝试更改底部：-8px.box p{
中的code>值（设为+18）只有文本现在不可见？如果没有浏览器，我如何帮助您。我想您的文本在那里（图像下方）它是下一张图片的封面。只需确保将您的right:6x；更改为-50。这样您就可以看到它。对于png，我确定我有我的背景不透明度，对于您的代码，我没有，某些浏览器可能不支持此规则。
<!DOCTYPE html>  

display: inline-block

.box {
    padding-left: 99999px;
    overflow: hidden;
}

.box:hover {
    padding-left: 0px;
}