2
So habe ich im Grunde eine Pfeil-Art-Sache, die ich nach oben bewegen möchte, wenn Sie den Mauszeiger darüber bewegen, dann wieder nach unten, wenn Sie die Maus aus. Um dies zu tun, habe ich den Pfeil in ein Eltern-Div gesetzt und Mouseover von der Eltern-Div. Hier ist mein Code:Eigenschaften Nur Anwendung auf Inner Div
HTML:
<div class="outercircle">
<div class="circle">
<div class="innercircle"></div>
</div>
</div>
CSS:
.outercircle {
border: 1px solid black;
margin-top: 80vh;
width: 80px;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}
.circle {
width: 60px;
height: 60px;
border: 7px solid black;
border-radius: 50%;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
.innercircle {
display: inline-block;
margin-top: 15%;
margin-left: 24.5%;
width: 40%;
height: 40%;
border-top: 7px solid black;
border-right: 7px solid black;
-moz-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
JavaScript:
<script>
$(document).ready(function() {
var $outercircle = $(".outercircle");
var $circle = $(".circle");
$outercircle.hover(function() {
$circle.animate({
marginTop: 0
}, 200);
});
$outercircle.mouseout(function() {
$circle.animate({
marginTop: 20
}, 200);
});
})
</script>
Das Problem ist es nur funktioniert, wenn Sie die inneren Tauchmouseover (.innerkreis). Der Cursor: Zeiger funktioniert auch nur für .innercircle. Jede Hilfe sehr geschätzt und schöne Ferien.
Edit: Wenn man sieht, dass diese vereinfachte Version auf jsfiddle funktioniert, hier ist das ganze HTML und CSS, falls es etwas damit zu tun hat.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylz.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>Thomas Urbanak</title>
<script>
$(document).ready(function() {
var $outercircle = $(".outercircle");
var $circle = $(".circle");
$outercircle.mouseenter(function() {
$circle.animate({
marginTop: 0
}, 200);
});
$outercircle.mouseleave(function() {
$circle.animate({
marginTop: 20
}, 200);
});
})
</script>
</head>
<body>
<div id="titlet">
<ul id="menu">
<li class="menu"><a href="#">home</a></li>
<li class="menu"><a href="#">work</a></li>
<li class="menu"><a href="#">about</a></li>
</ul>
<h1 class="title">BOB.BLUBLA</h1>
<hr>
<p class="subtitle">This is a paragraph, made up of words.</p>
</div>
<div class="outercircle">
<div class="circle">
<div class="innercircle"></div>
</div>
</div>
</body>
</html>
CSS:
/*menu*/
#menu {
font-family: "Roboto", sans;
font-size: 20px;
}
.menu {
display: inline-block;
}
a {
text-decoration: none;
color: black;
-webkit-transition: border-bottom .15s;
transition: border-bottom .15s;
}
a:hover {
border-bottom: 5px solid #ff5c5c;
}
#menu, .menu {
list-style: none;
margin-left: 20px;
margin-right: 20px;
padding: 0;
}
/*title tile*/
#titlet {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100vh;
width: 100%;
}
.title {
font-family: "titlefont", sans;
text-align: center;
font-size: 90px;
margin-top: 250px;
}
hr {
width: 20%;
height: 7px;
background: black;
border: none;
margin-top: -50px;
}
.subtitle {
text-align: center;
font-family: "Roboto", sans;
font-size: 20px;
}
/*circle*/
.outercircle {
border: 1px solid black;
margin-top: 80vh;
width: 80px;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}
.circle {
width: 60px;
height: 60px;
border: 7px solid black;
border-radius: 50%;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
.innercircle {
display: inline-block;
margin-top: 15%;
margin-left: 24.5%;
width: 40%;
height: 40%;
border-top: 7px solid black;
border-right: 7px solid black;
-moz-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
Schien zu funktionieren nicht. Ich habe meinen ganzen Code hinzugefügt, falls es ein tieferes Problem ist. – Tommay
Wenn Sie meinen Code oben ausführen, macht er das, was Sie wollen? – klugjo
Es nicht, nein. – Tommay