Javascript jQuery更改用户的img
大家好 我有以下代码: CSS: 正如您所看到的,它没有正常工作,即在图像上滑动鼠标时显示div 我也相信我这样做的方式,它太污染了。我相信在这种情况下,有一种更优雅的方法可以达到同样的效果,我希望您能给予帮助 我想小姑娘。如果有人有一个插件,让jquery上传照片,它会给我一个屏幕,以预定义的大小(200x200)调整图像大小,并在接受时进行剪切,我将非常感激Javascript jQuery更改用户的img,javascript,jquery,html,css,events,Javascript,Jquery,Html,Css,Events,大家好 我有以下代码: CSS: 正如您所看到的,它没有正常工作,即在图像上滑动鼠标时显示div 我也相信我这样做的方式,它太污染了。我相信在这种情况下,有一种更优雅的方法可以达到同样的效果,我希望您能给予帮助 我想小姑娘。如果有人有一个插件,让jquery上传照片,它会给我一个屏幕,以预定义的大小(200x200)调整图像大小,并在接受时进行剪切,我将非常感激 谢谢。您已切换事件 向下滑动意味着显示 slideUp的意思是隐藏 你把它们倒过来了 $('.div_img').hov
谢谢。您已切换事件
- 向下滑动意味着显示
- slideUp的意思是隐藏
$('.div_img').hover(function() {
$(this).find('.dropdowndiv').slideDown('fast');
}, function() {
$(this).find('.dropdowndiv').slideUp('fast');
});
动画不会发生是因为
.input_photo{display:table;}
,这是因为jQuery无法在开箱即用的情况下为表设置动画。如果设置块元素的类型,您将看到其动画效果良好 解释
.hover(handlerIn(eventObject)、handlerOut(eventObject))
当光标进入时,您希望文本向下滑动,使其显示。调用slideUp()
使浏览器试图隐藏已隐藏的div
解决方案 尝试反转您的功能: JavaScript/JQuery
假设您试图在鼠标滑过照片区域时显示上载选项,则以下操作应能解决此问题
$('.dropdowndiv').hide();
$('.div_img').hover(function() {
$('.dropdowndiv').slideDown('fast');
}, function() {
$('.dropdowndiv').slideUp('fast');
});
对不起,我不明白你的问题不,不,我想相反。仅当我将鼠标悬停在照片上时才在照片上显示div。这就是我的代码将要做的!你在做相反的事。您的代码在mouseenter上隐藏div,并在mouseleave上显示它。我的代码将在mouseenter上显示它,并在mouseleave上隐藏它!试试看!哇,真的!对不起,但是,我哪里错了?div将显示,但不会上升。因为您将其设置为表格显示。更新了我的答案。真的,但是,如果没有这个,文本就不会居中。工作正常,但是,我错在哪里?div出现,但没有上升。
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
text-decoration: none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.fl {
float: left;
}
.edit_options {
margin: 50px;
}
.div_img {
position: relative;
margin-right: 0px;
padding-left: 0px;
}
.edit_admin img, .edit_admin p {
text-align: center;
}
.input_photo {
position: absolute;
width: 200px;
height: 54px;
bottom: 20px;
background: rgba(170, 173, 168, 0.9);
display: table;
}
.input_photo span {
height: 54px;
display: table-cell;
vertical-align: middle;
text-align: center;
color: #000000;
}
.input_photo input {
position: absolute;
right: 0;
bottom: 0;
width: 200px;
height: 54px;
z-index: 2;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer;
}
$('.div_img').hover(function() {
$(this).find('.dropdowndiv').slideDown('fast');
}, function() {
$(this).find('.dropdowndiv').slideUp('fast');
});
$('.dropdowndiv').hide();
$('.div_img').hover(function() {
$(this).children('.dropdowndiv').slideDown('fast');
}, function() {
$(this).children('.dropdowndiv').slideUp('fast');
});
$('.dropdowndiv').hide();
$('.div_img').hover(function() {
$('.dropdowndiv').slideDown('fast');
}, function() {
$('.dropdowndiv').slideUp('fast');
});