Я пытаюсь сделать aa span на mouseOver
или наведите курсор в JQuery. Я бы хотел, чтобы это произошло, когда я box1
курсор на box1
, должна появиться "sale"
. Он не работает, может кто-то может помочь?
HTML:
<div id="columnOne">
<span id="sale">for sale</span>
<div id="box1"></div>
<div id="box2"></div>
</div>
CSS:
#sale{width: 85px;
margin: 0 0 -45px 15px;
padding: 5px;
position: relative;
display: none;
font-size: 14pt;
font-family: 'oxygen', serif;
background-color: #000;
color: #fff;
text-transform: uppercase;
-webkit-border-radius: 5px 5px;
-moz-border-radius: 5px 5px;
border-radius: 5px 5px;}
#box1{width: 240px;
height: 220px;
margin: 10px;
position: relative;
display: block;
background-color: #4174a8;
background-image: url(../images/crown.png);
background-repeat: no-repeat;
background-position: center;
z-index: -1;}
JQuery:
$(document).ready(function(){
$('#boxt1').hover(function(){
$('#sale').mouseOver('fast');
});
});
У вас есть пара вопросов:
div
является элементом уровня блока, поэтому он будет принимать всю ширину контейнера, поэтому, даже если вы перейдете в правую часть div, он все еще находится на div, поэтому ваш mouseleave не запускается. Вместо этого вы можете float
/сделать его inline-block
div, чтобы он учитывал только указанное измерение.Пытаться
$(document).ready(function () {
$('#columnOne').hover(function () {
$('#sale').fadeToggle('fast');
});
});
Вы нацеливаете $ ('# boxt1') на свой jQuery вместо $ ('# box1'), который может вызвать проблемы, и я не уверен, почему вы запускаете событие mouseover. Это должно работать:
$(document).ready(function(){
$('#box1').hover(
function(){
$('#sale').stop().fadeIn();
},
function(){
$('#sale').stop().fadeOut();
}
);
});