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

Question

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

<p></p>

<pre><code> #item1 a {
    position: absolute;

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

#item1 a:hover 
    {
        position: absolute;

       background-image:url("images/step1_rollover.gif");
</code></pre>

<p>}</p>

<pre><code>#item2 a{
        position: absolute;

    background-image:url("../images/step2_without_rollover.gif");
</code></pre>

<p>}</p>

<pre><code>#item2 a:hover {
    position: absolute;

    background-image:url("../images/step2_rollover.gif");
</code></pre>

<p>}</p>

<pre><code>#item3 a{
        position: absolute;

    background-image:url("../images/step3_without_rollover.gif");
</code></pre>

<p>}</p>

<pre><code>#item a:hover {
    position: absolute;

    background-image:url("../images/step3_rollover.gif");
</code></pre>

<p>}
</p>

注意:我对 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");
    }