Question

我有一个div，我只使用绝对定位和隐藏溢出来显示顶部的一部分。当你将鼠标悬停在我想要显示div的剩余部分时。根据里面的信息，这个div可以是不同的总高度。

!define APP_COMPANY "Foo"
!define APP_PRODUCT "Bar"
!include MUI2.nsh
InstallDir "$Temp\Test"
RequestExecutionLevel user

#########################################################################
## Language Selection Dialog Settings

## Remember the installer language
!define MUI_LANGDLL_REGISTRY_ROOT HKCU
!define MUI_LANGDLL_REGISTRY_KEY "Software\${APP_COMPANY}\${APP_PRODUCT}"
!define MUI_LANGDLL_REGISTRY_VALUENAME "Installer Language"

!insertmacro MUI_PAGE_WELCOME
!insertmacro MUI_PAGE_DIRECTORY
!insertmacro MUI_PAGE_INSTFILES
!insertmacro MUI_PAGE_FINISH
!insertmacro MUI_UNPAGE_CONFIRM
!insertmacro MUI_UNPAGE_INSTFILES


## Languages (first language is the default language)
!insertmacro MUI_LANGUAGE "Portuguese"
!insertmacro MUI_LANGUAGE "English"
!insertmacro MUI_LANGUAGE "French"
!insertmacro MUI_LANGUAGE "Spanish"
!insertmacro MUI_LANGUAGE "Dutch"


## Language selection functions (for install and uninstall)
Function .onInit
  !insertmacro MUI_LANGDLL_DISPLAY
FunctionEnd

## Uninstaller Functions
Function un.onInit
   !insertmacro MUI_UNGETLANGUAGE
FunctionEnd

Section
SetOutPath $InstDir
WriteUninstaller "$InstDir\Uninst.exe"
SectionEnd

Section Uninstall
DeleteRegKey HKCU "Software\${APP_COMPANY}\${APP_PRODUCT}"
DeleteRegKey /IfEmpty HKCU "Software\${APP_COMPANY}"
Delete "$InstDir\Uninst.exe"
RMDir $InstDir
SectionEnd

和jQuery：

.showAll {
    bottom: 0px;
}

.showLittle {
    top: 265px;
}

正如您从this example所看到的那样，我让它在从一个到另一个“弹出”的地方工作。我真正想要的是让它上下动画和“滑动”，而不是从一个到另一个“弹出”。

有什么建议吗？

Answer 1

不使用top属性，而是使用负bottom值：

.showLittle {
    bottom: -105px;
}

然后使用转换：

.info {
    transition: all .2s;
}

演示：JSFiddle

另一种方法，如果你想要一个动态高度，就是使用jQuery来计算偏移量：

    var elementHeight = -($('.info').height() - 34);
    console.log(elementHeight);
    $('.showLittle').css('bottom', elementHeight);

并设置以下CSS：

.showAll {
    bottom: 0 !important;
}

演示：JSFiddle

Answer 2

您不需要使用Javascript，只需使用CSS。

.info {
    bottom: 0;
    margin-bottom: -102px;
    transition: margin 0.5s ease;
}
.tree:hover .info {
    margin-bottom: 0;
}

如何“滑动”div的剩余部分？

2 个答案: