我只是试图为我的投资组合创建一个企业页面。一切看起来都很好,但我的 jquery 代码无法正常工作。
当悬停在屏幕中间的一个圆圈周围时,我想淡入包含“音乐”和“网页设计”内容的 2 个框。div.hidden-elements 在 Circle 元素中。
现在,当我悬停圆圈时,它会淡入,当我离开圆圈时,它会淡出。问题:当我在一个新的“隐藏”框中移动光标时,它们会因为我离开圆形元素而淡出?
你能帮我解决这个问题吗?这是我的代码:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
console.log('DOM READY');
$('#me').mouseover(function () {
$('.hidden').fadeIn(1000);
});
$('#me').mouseout(function () {
$('.hidden').fadeOut(1000);
});
});
</script>
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>DominikBiedebach - Web- und Printdesigner</title>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700|Open+Sans+Condensed:300,700);
html, body { background: #f4f4f4; color: #202020; }
div#me{
background: url(images/me.png) no-repeat;
height: 256px;
width: 256px;
margin: 40px auto 10px auto;
position: relative;
}
div#container{
width: 960px;
margin: 0px auto;
text-align: center;
}
h1 {
font-size: 100px;
font-family: 'Open Sans Condensed', Arial, Helvetica, sans-serif;
margin: 0px;
}
h3 {
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 30px;
line-height: 26px;
text-transform: uppercase;
}
.hidden { display: none; }
#music {
position: absolute;
left: -200px;
width: 200px;
height: 400px;
}
</style>
</head>
<body>
<div id="container">
<div id="me">
<div class="hidden" id="music">Testbox</div>
<div class="hidden" id="webdesign">Testbox</div>
</div>
<h1>xxxx</h1>
<h3>xxxx</h3>
</div>
</body>
</html>