Question

当我将鼠标悬停在列表项目中的链接上时，我使用CSS来显示图片。我有两个问题

如何在显示
如何隐藏＆＃39; col-2＆＃34;只在列表中间的div页面中间物品链接悬停在上面。

如果有一种简单的方法可以通过vanilla js Dom脚本来实现这一点，我会对它开放，但是没有jQuery。非常感谢！

CSS -

    /* absorbing paddings within the div's width, instead of adding it 
        on top */
        * { 
        box-sizing:border-box;
        }

        header {
         padding-top: 10px;
         }

 h1 {
    text-align: center;
    font-size: 150%;
}


#col-1 {
    width: 25%;
    vertical-align:top;
    display:inline-block;
}

#col-1, p h2 {
    text-align: left;
}

#col-1 {
    padding-top: 40px;
}

.col-1, ul {
    list-style: none;
    line-height: 150%;
}

.projectList li a {
    text-decoration: none;
    color: inherit;
}

#col-2 {
    width: 45%;
    padding-top: 30px;
    padding-left: 30px;
    margin-right: auto 5px;
    vertical-align:top;
    display:inline-block;
    }

/* display image on hover */

a:hover:after {
    content: url(https://upload.wikimedia.org/wikipedia/en/thumb/5/53/Arsenal_FC.svg/870px-Arsenal_FC.svg.png); 
}

HTML

<div id="globalName">
            <h1>Lorem Ipsum</h1>

        </div>
     </header>

      <div id="col-1">
       <div id="pageContent">
        <ul class="projectList">

            <li><a href="#">Project<span><img src="" alt="" height="" /></span></a></li>

            <li><a href="#">Project<span><img src="" alt="" height="" /></span></a></li>

            <li><a href="#">Project<span><img src="" alt="" height="" /></span></a></li>

            <li><a href="#">Project<span><img src="" alt="" height="" /></span></a></li>

            <li><a href="#">Project<span><img src="" alt="" height="" /></span></a></li>

            <li><a href="#">Project<span><img src="" alt="" height="" /></span></a></li>

            <li><a href="#">Project<span><img src="" alt="" height="" /></span></a></li>

        </ul>
        </div>
     </div>



        <div id="col-2">
        <h2>lorem ipsum</h2>

        <p>Lorem ipsum dolor sit amet, suspendisse nam habitasse pellentesque arcu quae dignissim, amet magna diam aenean. Amet ipsum aenean, massa posuere maecenas nam lectus nibh lacus, nisl lacus magna nullam leo quis.

Answer 1

您可以将图片用作悬停链接上image-background的{{1}}。

顺便说一句，我认为您不能仅通过css在:after上选择 #col-2 。

＆＃13;

li:hover

＆＃13;

/* absorbing paddings within the div's width, instead of adding it 
        on top */
* { 
  box-sizing:border-box;
}

header {
  padding-top: 10px;
}

h1 {
    text-align: center;
    font-size: 150%;
}


#col-1 {
    width: 25%;
    vertical-align:top;
    display:inline-block;
}

#col-1, p h2 {
    text-align: left;
}

#col-1 {
    padding-top: 40px;
}

.col-1, ul {
    list-style: none;
    line-height: 150%;
}

.projectList li a {
    text-decoration: none;
    color: inherit;
}

#col-2 {
    width: 45%;
    padding-top: 30px;
    padding-left: 30px;
    margin-right: auto 5px;
    vertical-align:top;
    display:inline-block;
    }

/* display image on hover */

a:hover:after {
    content: "";
    margin: 0;
    top: 25%;
    left: 50%;
    transform: translate(-50%);
    position: absolute;
    display: block;
    width: 50%;
    height: 100%;
    background-image: url(https://upload.wikimedia.org/wikipedia/en/thumb/5/53/Arsenal_FC.svg/870px-Arsenal_FC.svg.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    align-items: center;
    justify-content: center;
}

＆＃13;

Answer 2

通过将保持图像的after元素更改为绝对中心。检查下面是否有帮助

您可以使用背景图片而不是内容：像这样

a:hover:after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    padding: 8%;
    border: 1px red solid;
    background-size: contain;
    background-image: url(https://upload.wikimedia.org/wikipedia/en/thumb/5/53/Arsenal_FC.svg/870px-Arsenal_FC.svg.png);
    background-repeat: no-repeat;
}

/* absorbing paddings within the div's width, instead of adding it 
        on top */
        * { 
        box-sizing:border-box;
        }

        header {
         padding-top: 10px;
         }

 h1 {
    text-align: center;
    font-size: 150%;
}


#col-1 {
    width: 25%;
    vertical-align:top;
    display:inline-block;
}

#col-1, p h2 {
    text-align: left;
}

#col-1 {
    padding-top: 40px;
}

.col-1, ul {
    list-style: none;
    line-height: 150%;
}

.projectList li a {
    text-decoration: none;
    color: inherit;
}

#col-2 {
    width: 45%;
    padding-top: 30px;
    padding-left: 30px;
    margin-right: auto 5px;
    vertical-align:top;
    display:inline-block;
    z-index: 5;
    position: relative;
    }

/* display image on hover */

/**
a:hover:after {
    content: url(https://upload.wikimedia.org/wikipedia/en/thumb/5/53/Arsenal_FC.svg/870px-Arsenal_FC.svg.png);
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}**/

a:hover:after {
    content: '';
    position: absolute;
    /* left: 50%; */
    /* transform: translate(-50%); */
    padding: 13%;
    width: 20%;
    border: 1px red solid;
    background-size: contain;
    background-position: 50%;
    background-image: url(https://upload.wikimedia.org/wikipedia/en/thumb/5/53/Arsenal_FC.svg/870px-Arsenal_FC.svg.png);
    background-repeat: no-repeat;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: -1;
    margin: 0 auto;
}

<div id="globalName">
            <h1>Lorem Ipsum</h1>

        </div>
     </header>

      <div id="col-1">
       <div id="pageContent">
        <ul class="projectList">

            <li><a href="#">Project<span><img src="" alt="" height="" /></span></a></li>

            <li><a href="#">Project<span><img src="" alt="" height="" /></span></a></li>

            <li><a href="#">Project<span><img src="" alt="" height="" /></span></a></li>

            <li><a href="#">Project<span><img src="" alt="" height="" /></span></a></li>

            <li><a href="#">Project<span><img src="" alt="" height="" /></span></a></li>

            <li><a href="#">Project<span><img src="" alt="" height="" /></span></a></li>

            <li><a href="#">Project<span><img src="" alt="" height="" /></span></a></li>

        </ul>
        </div>
     </div>



        <div id="col-2">
        <h2>lorem ipsum</h2>

        <p>Lorem ipsum dolor sit amet, suspendisse nam habitasse pellentesque arcu quae dignissim, amet magna diam aenean. Amet ipsum aenean, massa posuere maecenas nam lectus nibh lacus, nisl lacus magna nullam leo quis.

以悬停的图像为中心

2 个答案: