0

我的问题是一个我确信会很常见的问题，但尽我所能，我根本找不到任何关于这个的教程。

我正在寻找为网站构建文本和图像导航菜单。在我看来，很多人都想做这样的事情，但要么我完全错过了一个简单的概念，要么很多人不想做这样的事情。

我的确切目标：创建一个导航菜单，顶部有图片，底部有 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 （注意导航菜单）。

我感谢任何和所有的帮助。

节日快乐，拉斐尔

4

1 回答 1

2

我为你创建了一个 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只要将里面ul的任何东西悬停，下面的 css 就会改变 's opacity。

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

PS 作为一个忠告，如果可以的话，尽量避免在 CSS 中使用 ID 选择器。:)

于 2012-12-19T01:38:24.057 回答