Я пытаюсь осуществить опрокидывание в боковом меню

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>

Я пытаюсь реализовать опрокидывание изображения, когда связь зависла над в боковом меню, но я не имею какой-либо удачи. Я хочу, чтобы это произошло, когда одна из ссылок в боковом меню зависала над изображением рядом с ним, мне нужно 4 отдельных опрокидывания по одному для каждой ссылки. Я пробовал устанавливать классы и использовать: hover, но он, похоже, не работает. Я прикрепил CSS и HTML как только боковое меню, если какое-то тело может сказать мне, какие функции реализовать, я бы очень его оценил.

Answer 1

Это может быть выполнено с помощью css с псевдоэлементом :after. Я также добавил jQuery в этот фрагмент и переместил javascript в свой собственный файл. Я сделал то же самое с css. Лучше избегать inline 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!>