HTML定位与更多的项目

我对HTML有点陌生，目前，我正在为自己创建一个自定义主页，其中包含我经常访问的网站的链接。

当我将鼠标悬停在图片上时，它会扩展到显示更具体的链接(即subreddits)。

然而，问题是"子链接图标"没有正确地与展开的DIV对齐，当鼠标悬停在大图片上时，它会显示在大图片的前面。

我想做的是让子链接图标与扩展的div同步。*

HTML:

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>Homepage</title>
    </head>
    <body>
        <div class="submenu" id="steam"><a href="http://store.steampowered.com" target="_blank"><img src="steam.png"></a></div>
        <div class="submenu" id="reddit">
            <a href="http://www.reddit.com"><img src="reddit.png"/></a>
            <ul>
                <li><img src="reddit.png"/></li>
                <li><img src="reddit.png"/></li>
                <li><img src="reddit.png"/></li>
            </ul>
        </div>
        <div class="submenu" id="youtube"><a href="http://www.youtube.com"><img src="youtube.png"/></a></div>
    </body>
</html>

CSS:

body {
    background-color: #330000;
    color: white;
}
div img {
    width:256px;
    height:256px;
    border-radius:5px;
}
li img {
    width:75px;
    height:75px;
    border-radius:15px;
}
#youtube:hover {
    border: #E6E6E6 solid 4px;
    background-color: #E6E6E6;
}
#steam:hover {
    border: #12151A solid 4px;
    background-color: #12151A;
}
#g2a:hover {
    border: #0F1F2E solid 4px;
    background-color: #0F1F2E;
}
#reddit:hover {
    border: #999999 solid 4px;
    background-color: #999999;
}
ul{
    position:absolute;
    list-style-type: none;
    display:none;
    margin-left: 125px;
}
.submenu {
    border-radius: 5px;
    position:relative;
    display: inline-block;
    margin-left: 0px;
    width:256px;
    height:256px;
    border:4px solid #330000;
    text-align:center;
    margin-left:5px;
    margin-top:5px;
    transition: width 1s;
    z-index:0;
}
.submenu img {
    float:left;
}
.submenu:hover {
    width:350px;
    transition: width 1s;
}
.submenu:hover img {
    float:left;
    z-index:2;
}
.submenu ul {
    position: absolute;
}
.submenu:hover ul {
    display:inline-block;
    float:right;
    margin-top:-10px;
    margin-left:-45px;
    position:absolute;
    z-index: 1;
}
.submenu:hover ul li img {
    float:left;
    margin-left: -30px;
    margin-top: 12.5px;
}

我试着在网上搜索帮助，但不是很好。

JSFIDDLE

让我们一步一步来。

第一个问题:悬停时，"子图标链接"会分层在大图之上，而不是在大图之下。

这是可以修复的z-index，但首先你必须了解z-index是如何工作的。

注意:z-index仅适用于定位元素(position:absolute, position:relative, position:fixed)。

使用z-index你可以图层元素在同一HTML层。因为它不起作用，我假设您已经尝试在子菜单链接上应用z-index。这是行不通的，因为大的画面和他们不在同一层。如果我们看一下你的HTML结构你会看到:

<div class="submenu" id="reddit">
        <a href="http://www.reddit.com"><img src="http://www.workatplay.com/files/styles/fpo_medium/public/article/logo/Reddit%20Small.jpg?itok=dclAuuiP"/></a>
        <ul>
            <li><img src="http://www.workatplay.com/files/styles/fpo_medium/public/article/logo/Reddit%20Small.jpg?itok=dclAuuiP"/></li>
            <li><img src="http://www.workatplay.com/files/styles/fpo_medium/public/article/logo/Reddit%20Small.jpg?itok=dclAuuiP"/></li>
            <li><img src="http://www.workatplay.com/files/styles/fpo_medium/public/article/logo/Reddit%20Small.jpg?itok=dclAuuiP"/></li>
        </ul>
</div>

要在这种情况下使用z-index，您必须查看图像或其容器在同一层上的位置。

你的大图包含在锚标记(a)
您的小图片包含在列表项
这些列表项包含在无序列表

这个无序列表和锚标记位于同一层。将z-index应用于其中一个将解决此问题。

注意:当使用"position: absolute"one_answers"position: fixed"或任何其他改变元素在HTML堆栈中的位置的属性时，效果会有所不同。

JSFiddle: https://jsfiddle.net/eehdo8wa/5/

我做了什么:

增加"z-index: -1;" to "子菜单ul"
删除"z-index: 1;" from "子菜单:悬停ul"

第二个问题:悬停时，"子图标链接"应该以与div展开相同的速度展开

所以，这样做应该是非常简单的，现在图片被正确地分层在大图下面。基本上，当你考虑它的时候，你所要做的就是让图片贴在父视图的右边，所以当它展开时，图片贴在右边并滑动，把它们带进视图。

JSFiddle: https://jsfiddle.net/eehdo8wa/6/

我做了什么:

我重新做了一些CSS，使它在滑动到视图之前，一切都已经在正确的位置。这就是在这些情况下你想要的。在你最初的游戏中，你在悬停部分设置了很多样式，改变了各种样式和间距，但这真的需要吗?最后，答案是否定的。现在它都在大图像后面的位置，准备滑入视图。

相关内容

最新更新

热门标签：