は、私はリンクがサイドメニューにホバーされたロールオーバーイメージを実装しようとしている

Question

.SideMenu1 {     
 
    padding-top:100px; 
 
    width: 0; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: #111; 
 
    overflow-x: hidden; 
 
    transition: 0.5s; 
 
    height:100%; 
 
} 
 

 
.SideMenu1 a {      
 
    padding: 8px 8px 8px 32px; 
 
    text-decoration: none; 
 
    font-size: 25px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s 
 

 
.XButton {    
 
    position: absolute; 
 
    top: 0; 
 
    right: 25px; 
 
    font-size: 36px; /
 
    margin-left: 50px; 
 
} 
 

 
@media screen and (max-height: 450px) { 
 
    .sidenav {padding-top: 15px;} 
 
    .sidenav a {font-size: 18px;} 
 
}

<div id="SideMenu" class="SideMenu1"> 
 
    <a href="javascript:void(0)" class="XButton" onclick="closeNav()">×</a> 
 
    <a href="#">Link1</a><br> 
 
    <a href="#">Link2</a><br> 
 
    <a href="#">Link3</a><br> 
 
    <a href="#">Link4</a><br> 
 
</div> 
 

 
<span style="font-size:30px; cursor:pointer; font-family:Arial" onclick="openNav()">Woosh</span> <!This is the Open button!> 
 

 
<script> 
 
function openNav() { 
 
    document.getElementById("SideMenu").style.width = "100%"; 
 
} 
 

 
function closeNav() { 
 
    document.getElementById("SideMenu").style.width = "0"; 
 
} 
 
</script>

サイドメニューへのロールオーバーを実装しようとしているが、私はいずれかを持っていませんよ運。 サイドメニューリンクの1つがイメージの横に表示されているときに、リンクごとに4つの別々のロールオーバーが必要です。 私はクラスを設定しようとしました：ホバーが動作していないようです。 CSSとHTMLをサイドメニューとして添付していますが、実装する機能を教えてくれればとっても感謝しています。

Answer 1

これは、:after疑似要素のCSSで実行できます。私もこのスニペットにjQueryを追加し、javascriptを独自のファイルに移動しました。私はCSSで同じことをしました。インラインCSSを避ける​​のが最善です。なぜなら、プロジェクトが大きくなると、インラインCSSを見つけてglobal.cssファイルに移動して変更するだけだからです。

$(document).ready(function() { 
 
    
 
function openNav() { 
 
    document.getElementById("SideMenu").style.width = "100%"; 
 
} 
 

 
function closeNav() { 
 
    document.getElementById("SideMenu").style.width = "0"; 
 
} 
 
    
 
$(".woosh").on('click', function() { 
 
    openNav(); 
 
    
 
}); 
 
    
 
});

.SideMenu1 {     
 
    padding-top:100px; 
 
    width: 0; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: #111; 
 
    overflow-x: hidden; 
 
    transition: 0.5s; 
 
    height:100%; 
 
} 
 

 
.SideMenu1 a {      
 
    padding: 8px 8px 8px 32px; 
 
    text-decoration: none; 
 
    font-size: 25px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s; 
 
    } 
 

 
.woosh { 
 
    font-size:30px; 
 
    cursor:pointer; 
 
    font-family:Arial; 
 
} 
 

 
#link1:hover { 
 
    background-color: orange; 
 
} 
 

 
a:hover { 
 
    position: relative; 
 
} 
 
a:hover:after { 
 
    content: url(https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150); /* no need for qoutes */ 
 
    display: block; 
 
    position: absolute; 
 
    left: 123px; /* change this value to one that suits you */ 
 
    top: 6px; /* change this value to one that suits you */ 
 
} 
 

 
.XButton {    
 
    position: absolute; 
 
    top: 0; 
 
    right: 25px; 
 
    font-size: 36px; /
 
    margin-left: 50px; 
 
} 
 

 
@media screen and (max-height: 450px) { 
 
    .sidenav {padding-top: 15px;} 
 
    .sidenav a {font-size: 18px;} 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="SideMenu" class="SideMenu1"> 
 
    <a href="javascript:void(0)" class="XButton" onclick="closeNav()">×</a> 
 
    <a href="#" id="link1">Link1</a><br> 
 
    <a href="#">Link2</a><br> 
 
    <a href="#">Link3</a><br> 
 
    <a href="#">Link4</a><br> 
 
</div> 
 

 
<span class="woosh">Woosh</span> <!This is the Open button!>