可查看的文本和图像网站导航菜单 - CSS答案

【问题标题】：Viewable Text & Image Website Navigation Menu - CSS可查看的文本和图像网站导航菜单 - CSS
【发布时间】：2012-12-19 10:04:07
【问题描述】：

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

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

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

感谢所有帮助。

节日快乐，拉斐尔

【问题讨论】：

标签： css image text menu navigation

【解决方案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 轻松完成。例如，只要悬停ul 中的任何内容，以下 css 将更改 #test b 的不透明度。

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

附：作为忠告，如果可以，请尝试avoid using ID selectors in CSS。 :)

【讨论】：

非常非常感谢您。我让它正常工作。我会听取您的建议并更频繁地使用类而不是 ID 选择器。一个问题：你能指出我正确的方向来了解更多关于“.both:hover .text”这样的语法吗？非常非常感谢你。我非常感激。
很高兴它有帮助。 .both:hover .text 本质上就像一个普通的 CSS 后代选择器。这里有更多关于不同类型的 CSSS 选择器的信息：w3.org/TR/CSS2/selector.html 如果您使用选择器，您可以使用 CSS 悬停做一些非常棒的事情，例如：css-tricks.com/hover-on-everything-but