问题可能有点有线但换句话说我有一个菜单(见jsfiddle)
当我将鼠标悬停在一个div上时,我会得到一个下拉.当我鼠标移动时,下拉消失.到现在为止还挺好.
问题是,如果鼠标悬停在下拉菜单上,我希望菜单保持打开状态.
ex: if($elem).not(":hover"){..}
一些代码:
<div class="top_menu_item">
<div class="hover_item">
<a href="#">TEST</a>
</div>
<div class="drop_item" style="display: none;">
<div>
<a href="#">My test</a>
</div>
<div class="">
<a href="#">Add test</a>
</div>
<div>
<a href="#">Remove test</a>
</div>
</div>
$(document).ready(function () {
var elem = new Array();
var len = $(".hover_item").length;
var i = 0;
while (i < len) {
elem[i] = $(".hover_item:eq(" + i + ")");
i = i + 1;
}
$.each(elem, function (key, val) {
hoverFunc(val);
});
});
function hoverFunc($elem) …我有一个div包含多个具有绝对位置的div,我想处理父div的鼠标输入事件我使用这个小提琴: 小提琴 它没有正常工作是他们的任何其他方式来处理这个问题？
HTML标记
<div id="content">
SYDNEY (Reuters) - An Australian man had his driving licence suspended for 10 months and was fined after he was
<div class="abs"></div>
caught driving a scooter made of a motorised beer cooler capable of carrying several dozen drinks -- after knocking back a few.
</div>
<div id="output">
</div>
脚本
$(function() {
var output = $("#output");
$("#content")
.mouseenter(function(e){
output.text("I'm in!");
}).mouseout(function(e) {
output.text("I'm out!");
});
});?
#content {
background-color:#cccc99;
position:relative;
}
.abs{
position:absolute;
top:0px;
left:70px; …我们假设我有一个.description班级的div .
div.description当用户将鼠标悬停在另一个div上时,我希望显示.image该类.
但是,当用户点击时div.image,我希望div.description保持可见状态.因此,如果用户点击.image,mouseleave则不应该应用该事件.
最后,当用户.image再次点击时,应再次激活悬停功能.这样当鼠标离开时.image1,div.description会再次隐藏.
希望你们能帮助我!
我试图隐藏一个div每当我将它悬停，并显示另外一个在同一个地方。而当我把鼠标出来的..以前div会显示，这div会被隐藏...
$(document).ready(function(){
$('#hover_tutor').hover(
function () {
$('#hover_tutor').hide();
$('#hover_tutor_hidden').show();
},
function () {
$('#hover_tutor').show();
$('#hover_tutor_hidden').hide();
}
);
});
<div id="hover_tutor">Blah</div>
<div id="hover_tutor_hidden" style="display:none;">Bleh</div>
但是，当悬停hover_tutor...时，正在发生某些事情。它在上下跳跃。我不知道这是怎么回事...
我有一个jquery悬停事件,当您将鼠标悬停在元素上时会触发该事件.麻烦的是,如果你将元素悬停在元素上多次,它会使事件排队,有时会使元素闪烁,几分钟取决于你将鼠标悬停在元素上的速度和持续时间.我想停止事件的传播,以便消除这种排队.
$('.pui-search-item').hover( function() {
$(this).find('.pui-actions').show('fade');
}, function(){
$(this).find('.pui-actions').hide('fade');
});
我怎么会这样做,我尝试了各种传播功能,没有任何效果.
提前致谢.
嗨我的代码有什么问题:
当我将鼠标悬停在#open #pull_down_content上时,应该从标题向下移动页面,当我离开#open时,它应该向上移动.但是当我在页面加载#pull_down_content时,我甚至将鼠标悬停在屏幕上时,我会立即测试代码.
$(function() {
//Open on hover
$('#open').hover((function(){
$('#pull_down_content').animate({'top':'-0px'},1000);
})
//Close when not hovered
(function(){
$('#pull_down_content').animate({'top':'-340px'},1000);
})
});
);
我需要你的帮助:
我有一个网站,我想改变,bg-coler同时盘旋在菜单上(如在rhcp网站上),我已经尝试了jquery但它没有工作..
(只是为了清楚,我不想改变包含我的菜单的div容器的背景颜色它应该是整个身体..-->代码)
谢谢!
码:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script type="text/javascript">
$('.start').hover(function () {
$('html').css('background-color', '#676767')
});
</script>
<?php include_once 'template.php' ?>
<title>Maximilian Braun</title>
</head>
<body>
<div class="start">
<h1>
<a href="actor.php" >Schauspieler</a> - <a href="foto.php">Fotograf</a>
</h1>
</div>
<?php echo footer();?>
</body>
我想弄清楚为什么我的悬停功能表现得很奇怪.当您将鼠标悬停在div上时,另一个div变为可见.但是,当我将光标向下移动到可见的div时,它会淡出并再次淡入.这不应该发生,应该保持可见,直到我的光标离开主容器.
这是我的代码.
HTML
<div id="searchWrapper" class="fleft">
<div class="box">Hover here!</div>
<div class="searchLinks" style="display: none;">
<form id="search_mini_form" action="" method="get">
<div class="form-search">
<label for="search">Search:</label>
<input id="search" type="text" name="q" value="" class="input-text" maxlength="128" autocomplete="off">
<button type="submit" title="Search" class="button"><span><span>Search</span></span></button>
<div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div>
<script type="text/javascript">
//<![CDATA[
var searchForm = new Varien.searchForm('search_mini_form', 'search', '');
searchForm.initAutocomplete('http://removed.com/index.php/catalogsearch/ajax/suggest/', 'search_autocomplete');
//]]>
</script>
</div>
</form>
</div>
</div>
jQuery的
<script type="text/javascript">
jQuery(function($) {
$("#searchWrapper").hover(
function () {
$(".searchLinks").fadeIn( 500 );
},
function () {
$(".searchLinks").fadeOut( 500 );
}
);
});
</script>
CSS …
我想在悬停时交换一个img src.通常我会使用:
$('#img').hover(function() {
$(this).attr('src', 'http://www.example.com/new-img.jpg');
});
但是,我正在通过Ajax加载内容,所以通常我会使用:
$('#main').on('hover', '#img', function() {
$('#img').attr('src', 'http://www.example.com/new-img.jpg');
});
但我正在阅读('hover',...)在jQuery 1.8中被弃用并在1.9中被删除(jQuery Docs))中,这是我目前正在使用的.除了使用以外,有没有人有任何工作:
$('#main').on('mouseenter', '#img', function() {
$('#img').attr('src', 'http://www.example.com/new-img.jpg');
});
$('#main').on('mouseleave', '#img', function() {
$('#img').attr('src', 'http://www.example.com/old-img.jpg');
});
我已经对我的问题做了一个jsfiddle。
问题是，当使用鼠标悬停在列表上时，我得到了我想要的背景悬停颜色。但是，当我使用箭头键导航时，jquery ui 默认主题颜色生效。这将创建两组背景颜色，一组使用鼠标，另一组使用箭头键。我尝试过使用
.ui-menu-item .ui-menu-item-wrapper:focus
但没有成功。我正在使用 jquery ui 1.12.1 和 jquery 1.10.2。如何在这两个事件中获得我想要的背景颜色和文本颜色？
提前致谢。
jquery ×10
jquery-hover ×10
css ×4
html ×3
javascript ×2
mouseleave ×2
fadein ×1
fadeout ×1
hover ×1
jquery-on ×1
jquery-ui ×1
menu ×1
mouseenter ×1
mouseover ×1
show ×1