隣のテキストにカーソルを置くと、ページの中心に画像が表示されます

Question

同様の質問が表示されますが、これはわかりません。

私は6つの質問のシリーズと中にコンパスの画像があるワードプレスでこのページで作業しています。コンパスの画像を変更して、コンパスの別の画像に質問が表示されたときにその質問を指し示すようにします。

ページはこちらです：http://wearecreativecreatures.com/2016/what-do-we-offer/#questions

私はこのオンラインのバージョンを見たが、不必要に複雑に思われている：http://leiperscreekgallery.com/artists/

私はこれだけ使ってCSSを行うことを期待しています。どんな助けもありがとう。

Answer 1

あなただけのCSSをしたい場合は、このような何かをしたいだろう（私はあなたにスタイリングを残しておきます）

しかし、それを作るかもしれない、純粋なJSでこれを行う方法は、（そう何のライブラリは必要ありません）があります開発が容易です。

.image-container { 
 
    border: 25px solid #ccc; 
 
    border-radius: 50%; 
 
    height: 300px; 
 
    width: 300px; 
 
    margin: 0 auto; 
 
} 
 
.image-text { 
 
    padding: 5px; 
 
    background: #ccc; 
 
    border: 1px solid; 
 
    margin: 1px; 
 
    cursor: pointer; 
 
} 
 
.image-text:hover { 
 
    background: #eee; 
 
    border-color: #333; 
 
} 
 
.image-text.leaf:hover ~ .image-container { 
 
    background-image: url('http://www.balitaza.com/wp-content/uploads/2015/02/Neem-Leaves.jpg'); 
 
} 
 
.image-text.grass:hover ~ .image-container { 
 
    background-image: url('http://mitchtrale.com/endlessgrass/images/grass5.jpg'); 
 
} 
 
.image-text.forest:hover ~ .image-container { 
 
    background-image: url('http://i.ebayimg.com/00/s/MTYwMFgxNjAw/$(KGrHqF,!jcFC3rBNy3PBQwnG-Wy9g~~60_35.JPG'); 
 
} 
 
.f-left { 
 
    float: left; 
 
} 
 
.f-right { 
 
    float: right; 
 
}

<span class="image-text leaf f-left" href="#">Leaf!!!</span> 
 
<span class="image-text grass f-left" href="#">Grass!!!</span> 
 
<span class="image-text forest f-left" href="#">Forest!!!</span> 
 
<span class="image-text forest f-right" href="#">Forest!!!</span> 
 
<span class="image-text grass f-right" href="#">Grass!!!</span> 
 
<span class="image-text leaf f-right" href="#">Leaf!!!</span> 
 

 
<div class="image-container"></div>