センターにホバーのみ画像

Question

私は、私のリストアイテムの中のリンクにカーソルを置いたときに画像を表示するためにCSSを使用しています。私は2つの問題

1. どのように私は、彼らは私がページの途中で「COL-2" のdivを非表示にすることができますどのよう
2. を示しているときホバー画像はページの中央に配置されていることを確認できた場合にのみを持っています 項目のリンクがホバーされているリスト

バニラJSドムスクリプト経由でこれを行う簡単な方法があれば、私はそれを開いているが、ない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.