Question

我的问题是我确信这是一个常见的问题，但就我的努力而言，我根本找不到任何有关此问题的教程。

我希望建立一个文本＆amp;网站的图像导航菜单。在我看来，很多人都想做这样的事情，但要么我完全错过了一个简单的概念，要么许多人都不想做这样的事情。

我的精确目标：创建一个导航菜单，顶部是图片，底部是CSS样式文字。当您将焦点或悬停在图片上时，图像会发生变化，文本也会像一个项目一样发生变化。

我的问题：在我的按钮上，如果将鼠标悬停在文本上，图像和文字会发生变化。如果将鼠标悬停在图像上，则只有图像会像两个独立的实体一样发生变化。

我的HTML：

    <!DOCTYPE HTML>
    <html>
    <head>

      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charset="UTF-8" />

      <link rel="stylesheet" type="text/css" href="test2.css" />

    </head>

    <body>


        <ul>
        <li id="onlineRugStore"><a href="#"id="test"><b>Button</b></a></li> 
        </ul>

CSS：

    body{
    background-color:#e8f1c4;  
    }

    #onlineRugStore a{
    display:block;
    width:191px;
    height:107px;
    background:url('bestimages/test/worktest.gif') 0 0;
    }

    #onlineRugStore a:hover{
    background:url('bestimages/test/worktest.gif') 0 -107px;
    }

    #test b{
    position:absolute;
    text-align:center;
    margin:110px 0 0 0;
    font-size:18px;
    color:white;
    text-decoration:none;
    border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;
    width:191px;
    height:24px;
    background-color:#cc7bd6;
    opacity:0.45;
    filter:alpha(opacity=45);
    padding:4px 0 0 0;
    }

    #test b:hover{
    opacity:1.0;
    }

    ul{
    list-style-type:none;
    }

我所谈论的一个例子可以在http://kokorugs.com/test2.php

查看

经过一番努力，我认为这可能是不可能的，然后我在以下网站上找到了一个有效的例子：http://www.amazeelabs.com/en（注意导航菜单）。

我感谢任何帮助。

节日快乐，圣拉斐尔

Answer 1

我为你创建了一个JSfiddle：http://jsfiddle.net/drXng/

您在CSS中看到的代码应该清楚地解释发生了什么。

/*CSS you want to apply to the element wrapping both the text and picture*/
.both {
 opacity: 0.5;
width: 200px;
height: 200px;
display: block;
}

/*CSS you want to apply to the text only before it is hovered*/
.text {
background-color: green;
}

/*CSS you want to apply to the picture only before it is hovered*/
.picture {
  width: 50px;
  height: 50px;
}

/*CSS you want to apply to the element wrapping both both the text and picture after hovered*/
.both:hover {
opacity: 1;
}

/*CSS you want to apply to text when both are hovered*/
.both:hover .text {
  background-color: blue;
}

/*CSS you want to apply to picture when both are hovered*/
.both:hover .picture {
background-color: red;
}

在您的情况下，可以通过将.both更改为ul轻松完成。例如，只要#test b内的任何内容悬停，以下css都会更改ul的不透明度。

ul:hover #test b{
opacity:1.0;
}

P.S。作为建议，如果可以，请尝试avoid using ID selectors in CSS。：）

可见文字＆amp;图像网站导航菜单 - CSS

1 个答案: