居中僅限懸停圖像

Question

我使用CSS在我懸停在列表項目的鏈接上時顯示圖像。我有兩個問題

1. 我如何才能確保懸停圖像在頁面上居中的時候都顯示
2. 我怎樣可以隱藏在頁面中間的「COL-2" 分區只有當列表 項目鏈接上空盤旋

如果這樣通過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

通過改變後元件將圖像保存到絕對中心它。檢查下面是否有幫助

你可以使用背景圖片，而不是內容：像這樣

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.