将仅悬停图像居中

Question

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

1. 如何确保悬停图像在显示时位于页面中心
2. 我怎样才能在页面中间隐藏“col-2”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

您可以将图像用作悬停链接上的:after 的image-background。

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

/* 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;
}

<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. </p>

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.