Ich habe 2 Bilder (#werkwijze & #werkwijzehover) gestylt und positioniert an der gleichen Stelle in meinem Dokument. Werkwijzehover hat display: none, Ich habe Code in jQuery geschrieben, so dass wenn #werkwijze über es schwebt sollte angezeigt werden: Versteckt und #werkwijzehover sollte Anzeige: Block.
Ich bin 99,9% sicher, dass mein Code korrekt ist. Auch habe ich Link-Tags um diese Elemente, aber ich bin nicht in der Lage, sie zu klicken. Weiß jemand, was hier vor sich geht?
$("#werkwijze").hover(function() {
$("#werkwijze").css(
"display", "none");
$("#werkwijzehover").css(
"display", "block");
});
$("#werkwijzehover").mouseout(function() {
$("#werkwijzehover").css(
"display", "none");
$("#werkwijze").css(
"display", "block");
});#wrapperhome10 {
width: 100%;
position: relative;
float: left;
}
#werkwijze {
width: 30%;
float: left;
position: relative;
margin-left: 35%;
margin-top: 5%;
display: block;
}
#werkwijzehover {
width: 30%;
float: left;
position: relative;
margin-left: 35%;
margin-top: 5%;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapperhome10">
<a>
<img id="werkwijze" src="/images/images/werkwijze.png" />
</a>
<a>
<img id="werkwijzehover" src="/images/images/werkwijzehover.png" />
</a>
</div>Antworten:
0 für die Antwort № 1Ihr Code scheint mir gut zu funktionieren. Führen Sie dieses Code-Snippet unten aus und sehen Sie, ob es wie erwartet funktioniert, oder lassen Sie mich in den Kommentaren unten wissen, was hier falsch ist und ich werde sehen, wie ich weiter helfen kann.
$("#werkwijze").hover(function() {
$("#werkwijze").css(
"display", "none");
$("#werkwijzehover").css(
"display", "block");
});
$("#werkwijzehover").mouseout(function() {
$("#werkwijzehover").css(
"display", "none");
$("#werkwijze").css(
"display", "block");
});#wrapperhome10 {
width: 100%;
position: relative;
float: left;
}
#werkwijze {
width: 30%;
float: left;
position: relative;
margin-left: 35%;
margin-top: 5%;
display: block;
}
#werkwijzehover {
width: 30%;
float: left;
position: relative;
margin-left: 35%;
margin-top: 5%;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapperhome10">
<a>
<img id="werkwijze" src="/images/https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
</a>
<a>
<img id="werkwijzehover" src="/images/https://s1.yimg.com/rz/d/yahoo_en-US_f_p_bestfit_2x.png" />
</a>
</div>