首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >用户的jQuery变更img

用户的jQuery变更img
EN

Stack Overflow用户
提问于 2013-06-12 01:17:41
回答 3查看 122关注 0票数 0

大家好。

我有这样的代码:

FIDDLE HERE

代码语言:javascript
复制
<div class="fl edit_options div_img">
<img class="img" src="${admin.img}" width="200px" height="200px" alt="Foto do Administrador" />
<div class="input_photo dropdowndiv"> <span>Alterar Foto</span>

    <br />
    <input type="file" name="file_photo" id="file_photo" value="Alterar Foto" />
</div>
<br />
<p>Administrador: ${admin.username}</p>

jQuery

代码语言:javascript
复制
$('.dropdowndiv').hide();
        $('.div_img').hover(function() {
            $(this).find('.dropdowndiv').slideUp('fast');
        }, function() {
            $(this).find('.dropdowndiv').slideDown('fast');
        });

CSS:

代码语言:javascript
复制
    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。

我也相信我这样做的方式,它是太污染了。我相信,在这种情况下,有一种更优雅的方法可以达到同样的效果,我希望您能帮助我。

我想小小姐。如果有人有一个让jquery上传照片的插件,它会向我显示一个屏幕,可以调整图像的预定义大小( 200x200),并在被接受时进行剪切,这将是非常感谢的。

谢谢。

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2013-06-12 01:23:54

您已经切换了事件

  • slideDown意味着显示
  • slideUp意味着隐藏。

你把它们颠倒过来

代码语言:javascript
复制
    $('.div_img').hover(function() {
        $(this).find('.dropdowndiv').slideDown('fast');
    }, function() {
        $(this).find('.dropdowndiv').slideUp('fast');
    });

动画不会因为.input_photo { display: table; }而发生,这是因为jQuery不能开箱即用动画表。如果你设置了一个块元素的类型,你会看到它的动画效果很好。

票数 2
EN

Stack Overflow用户

发布于 2013-06-12 01:25:30

解释

.hover()

.hover( handlerIn(eventObject), handlerOut(eventObject) )

当光标进入时,您希望文本向下滑动,这样它就会出现。调用slideUp()只是让浏览器尝试隐藏已经隐藏的div

解决方案

尝试反转您的函数:

JavaScript/JQuery

代码语言:javascript
复制
$('.dropdowndiv').hide();
$('.div_img').hover(function() {
    $(this).children('.dropdowndiv').slideDown('fast');
}, function() {
    $(this).children('.dropdowndiv').slideUp('fast');
});
票数 0
EN

Stack Overflow用户

发布于 2013-06-12 01:26:03

假设你试图在鼠标移到照片区域时显示上传选项,那么下面的方法应该可以解决这个问题。

代码语言:javascript
复制
$('.dropdowndiv').hide();
$('.div_img').hover(function() {
    $('.dropdowndiv').slideDown('fast');
}, function() {
    $('.dropdowndiv').slideUp('fast');
});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/17050029

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档