的HTML

Question

我想在鼠标悬停在3个不同的<a>元素上时显示3个不同的翻转图像。为此，我使用了以下机制，但这并没有解决任何目的。具体如下： -



 #item1 a {
    position: absolute;

    background-image:url("../images/step1_without_rollover.gif");
    }

#item1 a:hover 
    {
        position: absolute;

       background-image:url("images/step1_rollover.gif");


}

#item2 a{
        position: absolute;

    background-image:url("../images/step2_without_rollover.gif");


}

#item2 a:hover {
    position: absolute;

    background-image:url("../images/step2_rollover.gif");


}

#item3 a{
        position: absolute;

    background-image:url("../images/step3_without_rollover.gif");


}

#item a:hover {
    position: absolute;

    background-image:url("../images/step3_rollover.gif");


}

注意：我只是开始了解CSS。注册过程分为3个步骤。

谢谢！

Answer 1

你有一些不必要的CSS代码。请参阅下面的代码。它有希望做你想要的。在发布之前尝试清理一下css代码。话虽如此，我仍然不明白为什么你需要3个图像翻转..希望这有帮助

#item1
    {
      position: absolute;
      top: 492px;left :190px;width:400px; height:140px;
    }       
    #item1 a {
    background-image:url("images/image1.gif");
    }
     #item1 a:hover 
    {
    background-image:url("images/image2.gif");
    }

Answer 2

我不确定你在问题中提出了什么，无论如何，请记住，在同一个HTML元素中不能有多个ID，或者在HTML元素中不能有相同的ID。 ID必须是唯一的。

修改据我所知，仅使用：hover状态对同一元素实现3次不同的背景图像更改是不可能仅使用CSS。当您希望图像发生变化时，您需要JavaScript为元素或其父元素提供不同的类。

Answer 3

确定。我想我现在更了解你的观点了。因此，您在同一页面上拥有所有3个步骤。这意味着您在页面上不能拥有相同的ID 3次。你可以这样做：

修改

所以你有三个不同的页面。这意味着您可以在所有不同的页面上使用item1 id。但是你的样式表仍然需要了解它是哪个页面。您可以将item1 div包装在另一个具有不同类名的div上，然后相应地设置它。如果你这样做，那就是你需要做的事情：

第1页的HTML：

<form class="page1" ...> <div id="item1"> <a href="#">Step 1</a> ..... </div> </form>

第2页的HTML：

<form class="page2" ...> <div id="item1"> <a href="#">Step 2</a> ..... </div> </form>

第3页的HTML：

<form class="page3" ...> <div id="item1"> <a href="#">Step 3</a> ..... </div> </form>

您的样式表将如下所示：

#item1 { position: absolute; top: 492px;left :190px;width:400px; height:140px; } .page1 #item1 a { background-image: url("images/image1.gif"); } .page1 #item1 a:hover { background-image:url("images/image1_hover.gif"); } .page2 #item1 a { background-image:url("images/image2.gif"); } .page2 #item1 a:hover { background-image:url("images/image2_hover.gif"); } .page3 #item1 a { background-image:url("images/image3.gif"); } .page3 #item1 a:hover { background-image:url("images/image3_hover.gif"); }

或者还有另一种方法可以使用JavaScript分析页面，然后根据该页面更改背景图像。

Answer 4

的HTML

<div id="items">
<a href="#" class="item1">Item 1</a>
<a href="#" class="item2">Item 2</a>
<a href="#" class="item3">Item 3</a>
</div>

的CSS

#items
{
position:absolute;
top:490px;
left:190px;
width:400px;
height:50px;
}

#items a.item1
{
position:absolute; 
display:block; 
height:50px; 
width: 400px; 
top: 490px; 
left:242px; 
background:url("../images/step1_without_rollover.gif");
}
#items a.item1:hover
{
background:url("../images/step1_rollover.gif");
}

#items a.item2
{
position:absolute; 
display:block; 
height:50px; 
width: 400px; 
top: 490px; 
left:242px; /* don't forget to change your left value */
background:url("../images/step2_without_rollover.gif");
}
#items a.item2:hover
{
background:url("../images/step2_rollover.gif");
}

#items a.item3
{
position:absolute; 
display:block; 
height:50px; 
width: 400px; 
top: 490px; 
left:242px; /* don't forget to change your left value */
background:url("../images/step3_without_rollover.gif");
}
#items a.item3:hover
{
background:url("../images/step3_rollover.gif");
}

如何在CSS中为一个元素使用不同的ID

4 个答案:

的HTML

的CSS