我正在尝试在侧边菜单中实现翻转

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>

我正在尝试在侧边菜单中悬停链接时实现翻转图像，但我没有运气。 我想要它，所以当其中一个侧面菜单链接悬停在它旁边的图像上时，我需要为每个链接一个单独的翻转。 我已经尝试过设置类和使用：悬停，但它似乎不起作用。 我已经附加了CSS和HTML作为侧边菜单，如果某个机构可以告诉我实现哪些功能我会非常感激。

Answer 1

这可以使用带有 Private Sub Button1_Click(sender As System.Object, e As System.EventArgs) Handles Button1.Click If TextBox1.Text = "" Or TextBox2.Text = "" Then Msgbox("A field is missing") Exit Sub 'To avoid saving, escape the procedure Else ' code to save goes here End If End Sub 伪元素的css来完成。我还在这个代码片段中添加了jQuery，并将javascript移到了自己的文件中。我对css做了同样的事情。最好避免使用内联css，因为当项目变大时，你将不得不深入挖掘并找到内联css而不是转到global.css文件并在那里更改它。

:after

$(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;}
}