Jquery 如何在将鼠标悬停在图像上时切换淡入淡入淡出DIV

HTML:

CSS:

小提琴：

我希望DIV在单击图像时慢慢淡入，再次单击时慢慢淡出。但事实并非如此

如何解决此问题。

您需要的是：

.showUserInfo {
    position: absolute;
    background: #243942;
    border: 4px solid #E55302;
    overflow: hidden;
    right: 45px;
    min-height: 100px;
    width: 300px;
    top: 55px;
    z-index: 200;
    text-align: left;
    padding: 10px;
    color: #C0C0C0;
    display: none;
}
.showUserInfo:after, .showUserInfo:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.showUserInfo:after {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #88b7d5;
    border-width: 30px;
    margin-left: -30px;
}
.showUserInfo:before {
    border-color: rgba(194, 225, 245, 0);
    border-bottom-color: #c2e1f5;
    border-width: 36px;
    margin-left: -36px;
}

小提琴：

---

注意：

click

事件仅以一个函数作为参数

你也打败了我@疯狂马特哦，对不起，我也遇到了：）我怎么才能改成“悬停”？我将点击改为悬停，但这对我不起作用：/+1 btw用于捕获。我找到了答案。谢谢。小心点，名字“hover”是字符串“mouseenter mouseleave”的缩写。有时最好使用mouseenter和mouseleave，但不要使用悬停。只是一个建议。我不得不按照SO的要求等待：）

$("#imgUserInfo").on("click", function (e) {
    $('#showUserInfo').fadeIn("slow");
}, function () {
    $('#showUserInfo').fadeOut("slow");
});

.showUserInfo {
    position: absolute;
    background: #243942;
    border: 4px solid #E55302;
    overflow: hidden;
    right: 45px;
    min-height: 100px;
    width: 300px;
    top: 55px;
    z-index: 200;
    text-align: left;
    padding: 10px;
    color: #C0C0C0;
    display: none;
}
.showUserInfo:after, .showUserInfo:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.showUserInfo:after {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #88b7d5;
    border-width: 30px;
    margin-left: -30px;
}
.showUserInfo:before {
    border-color: rgba(194, 225, 245, 0);
    border-bottom-color: #c2e1f5;
    border-width: 36px;
    margin-left: -36px;
}

$('#showUserInfo').fadeToggle("slow");