Question

我对网页设计比较陌生，并寻找一些问题的帮助，我已经搜索过，无法找到任何帮助我的东西。

这是我的代码：

HTML：

<div class="menu">
<div id="menuimg"></div>
<span>
<ul>
<li>portfolio.</li>
<li>about.</li>
<li>contact.</li>
</ul>
</span>
<div id="logo"><img src="img/logo1.svg" height="100px" width="100px"></div>

</div>

CSS：

#menuimg {
    position:absolute;
    width:50px;
    height:50px;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    top:50px;
    background:url(../img/menuimgU.png) no-repeat;
    transition:all .5s;
}

.menu {
    position:fixed;
    height:100%;
    width:150px;
    left:0;
    background:#fff;
    -webkit-box-shadow: 3px 0px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    3px 0px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow:         3px 0px 5px 0px rgba(50, 50, 50, 0.75);
transition:all .5s;}

.menu:hover {
    height:100%;
    width:225px;
}

span {
    position:relative;
    display:none;}

.menu, span:hover {
    display:inline;
}

最初的问题是当.menu课程被徘徊时如何使无序列表显示。

Answer 1

如果我正确理解你的问题，你需要div＆＃34; menu＆＃34;中的列表文本。当你将鼠标悬停在＆＃34; menu＆＃34;。

上时显示

为什么不尝试以下方法：

li {
    color:white; --or whatever background color your list has
}

.menu:hover span ul li {
    color:black;
}

小提琴：http://jsfiddle.net/66cK7/

Answer 2

修改根据OP试图实现的目标，这些是适当的CSS更改：

.menu:hover span ul { opacity: 1; } span { position:relative; } ul { opacity: 0; }

<强> jsFiddle

结束修改

这是一个JSFiddle，可以满足你的要求（尽管我认为我们需要做一些改进才能达到你想要的实际行为 - 超出上面的解释）

除了将CSS #menu修复为.menu（将其从 ID 选择器更改为类选择器）之外，还有以下内容：其他变化：

显示#menuimg元素悬停时的跨度（我给它一个黑色背景以使其可见）：

#menuimg:hover~span { display:inline; }

继续显示跨越时的跨度：

span:hover { display:inline; }

为了使其正常工作，#menuimg元素在显示时必须与跨度相交。否则，在鼠标从一个元素到另一个元素之前，跨度将消失。

这整个事情在JavaScript或jQuery中会更简单，但希望我们可以从这里跳出来并使这个迭代答案到达你真正想要的端点。

在悬停时显示内容

2 个答案: