Question

当你将鼠标悬停在div上时，我正在建立一个div扩展的网站，当扩展时，它们会在里面显示一个链接。这与向左延伸的div完美配合，但是，当我想要镜像div，并制作一个延伸到右边的精确的div时，我无法正确放置链接。

.hoofdvak
        {
            width: 100%;
            height: 100%;
            overflow: hidden;
            padding: 0px;
            text-align: center;
            position: relative;
        }

.linkerwrap
    {
        width: 47%;
        height: 100%;
        display: inline-block;
        vertical-align: middle;
        position: relative;
        overflow: hidden;
    }

.rechterwrap
    {
        width: 47%;
        height: 100%;
        display: inline-block;
        vertical-align: middle; 
        position: relative;
        overflow: hidden;
    }   

.inhoudlinks
    {
        border-radius: 50px 10px 10px 50px;
        border: 2px solid #FFFFFF;
        background-color: #BEBEBE;
        opacity: 0.4;
        padding: 10px;
        width: 40%;
        height: 95%;
        transition: all 1s;
        float: right;
        overflow: hidden;
    }
    .inhoudlinks:hover
        {
            opacity: 1.0;
            width: 80%;
        }

.tekstlinks
    {
        height: 100%;
        width: 350px;
        float: left;
    }

.inhoudlinklinks
    {
        position: absolute;
        padding-left: 48%;
        padding-top: 17%;
    }

img.inhoudlinklinks
    {
        width:60%;
        opacity: 0.5;
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);  /* For Webkit browsers */
        filter: gray;  /* For IE 6 - 9 */
        -webkit-transition: all .6s ease;  /* Transition for Webkit browsers */
    }
    img.inhoudlinklinks:hover
        {
            filter: grayscale(0%);
            opacity:1;
            -webkit-filter: grayscale(0%);
            filter: none;
        }

.inhoudrechts
    {
        border-radius: 10px 50px 50px 10px;
        border: 2px solid #FFFFFF;
        background-color: #BEBEBE;
        opacity: 0.4;
        padding: 10px;
        width: 40%;
        height: 95%;
        transition: all 1s;
        float: left;
        overflow: hidden;
    }
    .inhoudrechts:hover
        {
            opacity: 1.0;
            width: 80%;
        }

.tekstrechts
    {
        height: 100%;
        width: 350px;
        float: right;
    }

.inhoudlinkrechts
    {
        position: absolute;
        padding-top: 17%;
        padding-right: 48%;

    }

img.inhoudlinkrechts
    {
        width:60%;
        opacity: 0.5;
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);  /* For Webkit browsers */
        filter: gray;  /* For IE 6 - 9 */
        -webkit-transition: all .6s ease;  /* Transition for Webkit browsers */
    }
    img.inhoudlinkrechts:hover
        {
            filter: grayscale(0%);
            opacity:1;
            -webkit-filter: grayscale(0%);
            filter: none;
        }

令我困惑的是，“inhoudlinklinks”使用“padding-left：48％”完美地工作，而“padding-right：48％”对“inhoudlinkrechts”没有任何作用。

我不知道如何管理从“inhoudlinkrechts”到其父div“inhoudrechts”的右边界的距离。

在左侧，它离开div，只在悬停期间变为可见。我希望右侧也一样。

我希望有人可以提供帮助

Answer 1

我认为你应该给inhoudrechts右边填充并使子div正确浮动。给孩子div宽度：100％;

Answer 2

我有点使用设置为像素的更远距离。

html        
    {
        margin: 10;
        background-image: url("../images/background.png");
    }

body    
    {
        margin: 0;
        font-family: "Verdana", Geneva, sans-serif;
        color: #000000;
    }

img
    {
        width: 100%;
    }

h1
    {
        font-size: 30pt;
        font-style: bold;
        font-family: "Courier New", Courier, monospace;
        letter-spacing: 5px;
        text-shadow: 1px 2px 1px #79797B;}
    }

h2
    {
        font-size: 20pt;
        font-style: bold;
    }

h3
    {
        font-size: 16pt;
        font-style: bold;
    }

p
    {
        font-size: 12pt;
    }

/* Optie met balk*/
#header
    {
        text-align: center;
        background-color: #BEBEBE;
        opacity: 1.0;
        overflow: hidden;
        border: 2px solid #FFFFFF;
        border-radius: 50px 50px 50px 50px;
        width: 750px;
        font-family: "Courier New", Courier, monospace;
        margin: 0 auto;
        text-shadow: 1px 2px 1px #FFFFFF;
    }

/* Optie zonder balk    
#header
    {
        text-align: center;
        overflow: hidden;
        color: #BEBEBE;
    }
*/
#body
    {
        text-align: center;
        overflow: hidden;
        margin: 0 auto;
    }

#footer
    {
        text-align: center;
        background-color: #BEBEBE;
        opacity: 0.4;
        overflow: hidden;
        border-top: 2px solid #FFFFFF;
        border-bottom: 2px solid #FFFFFF;
        float: bottom;
    }

.wrap
    {
        height: 600px;
        width: 100%;
        padding: 0px;
        margin: 0 auto;
        margin-top: 50px;
        margin-bottom: 50px;
    }   

.hoofdvak
    {
        width: 100%;
        height: 100%;
        overflow: hidden;
        padding: 0px;
        text-align: center;
        position: relative;
    }

.linkerwrap
    {
        width: 47%;
        height: 100%;
        display: inline-block;
        vertical-align: middle;
        position: relative;
        overflow: hidden;
    }

.rechterwrap
    {
        width: 47%;
        height: 100%;
        display: inline-block;
        vertical-align: middle; 
        position: relative;
        overflow: hidden;
    }   

.inhoudlinks
    {
        border-radius: 50px 10px 10px 50px;
        border: 2px solid #FFFFFF;
        background-color: #BEBEBE;
        opacity: 0.6;
        padding: 10px;
        width: 350px;
        height: 95%;
        transition: all 1s;
        float: right;
        overflow: hidden;
    }
    .inhoudlinks:hover
        {
            opacity: 1.0;
            width: 700px;
        }

.tekstlinks
    {
        height: 100%;
        width: 350px;
        float: left;
    }

.inhoudlinklinks
    {
        position: absolute;
        padding-left: 230px;
        padding-top: 75px;
    }

img.inhoudlinklinks
    {
        width:100%;
        opacity: 0.5;
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);  /* For Webkit browsers */
        filter: gray;  /* For IE 6 - 9 */
        -webkit-transition: all .6s ease;  /* Transition for Webkit browsers */
    }
    img.inhoudlinklinks:hover
        {
            filter: grayscale(0%);
            opacity:1;
            -webkit-filter: grayscale(0%);
            filter: none;
        }

.inhoudrechts
    {
        border-radius: 10px 50px 50px 10px;
        border: 2px solid #FFFFFF;
        background-color: #BEBEBE;
        opacity: 0.6;
        padding: 10px;
        width: 350px;
        height: 95%;
        transition: all 1s;
        float: left;
        overflow: hidden;
        position: relative
    }
    .inhoudrechts:hover, .inhoudrechts:active
        {
            opacity: 1.0;
            width: 700px;
        }

.tekstrechts
    {
        height: 100%;
        width: 350px;
        float: right;
    }

.inhoudlinkrechts
    {
        position: absolute;
        width: 400px;
        right: 225px;
        float: top;
        margin: 10px;
        display: inline-block;
    }
.inhoudlinkrechts2
    {
        position: absolute;
        width: 400px;
        right: 225px;
        top: 50%;
        float: top;
        margin: 10px;
        display: inline-block;
    }

img.inhoudlinkrechts
    {
        width:60%;
        opacity: 0.5;
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);  /* For Webkit browsers */
        filter: gray;  /* For IE 6 - 9 */
        -webkit-transition: all .6s ease;  /* Transition for Webkit browsers */
    }
    img.inhoudlinkrechts:hover
        {
            filter: grayscale(0%);
            opacity:1;
            -webkit-filter: grayscale(0%);
            filter: none;
        }

无论如何，感谢您的帮助

无法正确镜像div

2 个答案: