悬停显示较低的div

时间:2017-10-19 08:35:00

标签: jquery html css twitter-bootstrap-3

我希望显示带背景颜色的div,并在其中显示带有标题的[app] # (str) Title of your application title = PhytoGP # (str) Package name package.name = phytogp # (str) Package domain (needed for android/ios packaging) package.domain = com.phyto # (str) Source code where the main.py live source.dir = . # (list) Source files to include (let empty to include all the files) source.include_exts = py,png,jpg,kv,atlas,ttf,db # (list) List of inclusions using pattern matching #source.include_patterns = assets/*,images/*.png # (list) Source files to exclude (let empty to not exclude anything) #source.exclude_exts = spec # (list) List of directory to exclude (let empty to not exclude anything) source.exclude_dirs = tests, bin # (list) List of exclusions using pattern matching #source.exclude_patterns = license,images/*/*.jpg # (str) Application versioning (method 1) version = 0.1 # (str) Application versioning (method 2) # version.regex = __version__ = ['"](.*)['"] # version.filename = %(source.dir)s/main.py # (list) Application requirements # comma seperated e.g. requirements = sqlite3,kivy requirements = kivy,sqlite3,boto3==1.4.1,botocore==1.5.78,python-dateutil==2.6.0,jmespath==0.9.3,openssl,sparkpost,urllib3,requests,xhtml2pdf,reportlab,html5lib==1.0b8,webencodings,git+https://gitlab.com/kivymd/KivyMD.git # (str) Custom source folders for requirements # Sets custom source for any requirements with recipes # requirements.source.kivy = ../../kivy # (list) Garden requirements #garden_requirements = # (str) Presplash of the application presplash.filename = %(source.dir)s/assets/presplash.png # (str) Icon of the application icon.filename = %(source.dir)s/assets/icon.png # (str) Supported orientation (one of landscape, portrait or all) orientation = landscape # (list) List of service to declare #services = NAME:ENTRYPOINT_TO_PY,NAME2:ENTRYPOINT2_TO_PY # # OSX Specific # # # author = © Copyright Info # # Android specific # # (bool) Indicate if the application should be fullscreen or not fullscreen = 1 # (list) Permissions android.permissions = INTERNET # (int) Android API to use #android.api = 19 # (int) Minimum API required #android.minapi = 9 # (int) Android SDK version to use #android.sdk = 20 # (str) Android NDK version to use #android.ndk = 9c # (bool) Use --private data storage (True) or --dir public storage (False) #android.private_storage = True # (str) Android NDK directory (if empty, it will be automatically downloaded.) #android.ndk_path = # (str) Android SDK directory (if empty, it will be automatically downloaded.) #android.sdk_path = # (str) ANT directory (if empty, it will be automatically downloaded.) #android.ant_path = # (str) python-for-android git clone directory (if empty, it will be automatically cloned from github) #android.p4a_dir = # (str) The directory in which python-for-android should look for your own build recipes (if any) #p4a.local_recipes = # (str) Filename to the hook for p4a #p4a.hook = # (list) python-for-android whitelist #android.p4a_whitelist = # (bool) If True, then skip trying to update the Android sdk # This can be useful to avoid excess Internet downloads or save time # when an update is due and you just want to test/build your package # android.skip_update = False # (str) Bootstrap to use for android builds (android_new only) # android.bootstrap = sdl2 # (str) Android entry point, default is ok for Kivy-based app #android.entrypoint = org.renpy.android.PythonActivity # (list) List of Java .jar files to add to the libs so that pyjnius can access # their classes. Don't add jars that you do not need, since extra jars can slow # down the build process. Allows wildcards matching, for example: # OUYA-ODK/libs/*.jar #android.add_jars = foo.jar,bar.jar,path/to/more/*.jar # (list) List of Java files to add to the android project (can be java or a # directory containing the files) #android.add_src = # (str) python-for-android branch to use, if not master, useful to try # not yet merged features. #android.branch = master # (str) OUYA Console category. Should be one of GAME or APP # If you leave this blank, OUYA support will not be enabled #android.ouya.category = GAME # (str) Filename of OUYA Console icon. It must be a 732x412 png image. #android.ouya.icon.filename = %(source.dir)s/data/ouya_icon.png # (str) XML file to include as an intent filters in <activity> tag #android.manifest.intent_filters = # (list) Android additionnal libraries to copy into libs/armeabi #android.add_libs_armeabi = libs/android/*.so #android.add_libs_armeabi_v7a = libs/android-v7/*.so #android.add_libs_x86 = libs/android-x86/*.so #android.add_libs_mips = libs/android-mips/*.so # (bool) Indicate whether the screen should stay on # Don't forget to add the WAKE_LOCK permission if you set this to True #android.wakelock = False # (list) Android application meta-data to set (key=value format) #android.meta_data = # (list) Android library project to add (will be added in the # project.properties automatically.) #android.library_references = # (str) Android logcat filters to use #android.logcat_filters = *:S python:D # (bool) Copy library instead of making a libpymodules.so #android.copy_libs = 1 # (str) The Android arch to build for, choices: armeabi-v7a, arm64-v8a, x86 android.arch = armeabi-v7a # # iOS specific # # (str) Path to a custom kivy-ios folder #ios.kivy_ios_dir = ../kivy-ios # (str) Name of the certificate to use for signing the debug version # Get a list of available identities: buildozer ios list_identities #ios.codesign.debug = "iPhone Developer: <lastname> <firstname> (<hexstring>)" # (str) Name of the certificate to use for signing the release version #ios.codesign.release = %(ios.codesign.debug)s [buildozer] # (int) Log level (0 = error only, 1 = info, 2 = debug (with command output)) log_level = 2 # (int) Display warning if buildozer is run as root (0 = False, 1 = True) warn_on_root = 1 # (str) Path to build artifact storage, absolute or relative to spec file build_dir = /build/phytogp # (str) Path to build output (i.e. .apk, .ipa) storage # bin_dir = ./bin # ----------------------------------------------------------------------------- # List as sections # # You can define all the "list" as [section:key]. # Each line will be considered as a option to the list. # Let's take [app] / source.exclude_patterns. # Instead of doing: # #[app] #source.exclude_patterns = license,data/audio/*.wav,data/images/original/* # # This can be translated into: # #[app:source.exclude_patterns] #license #data/audio/*.wav #data/images/original/* # # ----------------------------------------------------------------------------- # Profiles # # You can extend section / key with a profile # For example, you want to deploy a demo version of your application without # HD content. You could first change the title to add "(demo)" in the name # and extend the excluded directories to remove the HD content. # #[app@demo] #title = My Application (demo) # #[app:source.exclude_patterns@demo] #images/hd/* # # Then, invoke the command line with the "demo" profile: # #buildozer --profile demo android debug 。将鼠标悬停在其上时,应显示SparkPost(文本),第一个消失(标题)。我正在玩z-index属性,但我无法实现它:

这是我的代码:

<p>
<p>

3 个答案:

答案 0 :(得分:1)

您可以尝试将opacity 0设置为1来简单。请查看下面的代码段以供参考。

&#13;
&#13;
.magigDiv {
  width: 50%;
  float: left;
  background-color: forestgreen;
  padding: 10px;
  border-radius: 25px;
  min-height: 150px;
  border: 1px double black;
  opacity: 0.5;
  position: relative;  
}

.title {
  text-align: center;
  opacity: 1;
  transition: all 0.3s ease;
}

.text {
  opacity: 0;
  transition: all 0.3s ease;
}

.title:hover+.text {
  opacity: 1;
}
.title:hover{
  opacity:0;
}
&#13;
<div class="magigDiv">
  <p class="title">
    LOREM IPSUM
  </p>
  <p class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

首先添加此css:

div p:last-child:hover { top:-50px; position:relative; background-color:green;}

并更改您应用的内联样式中的一些属性,如下所示:

<div style="width: 40%; float:left; background-color: green;padding: 10px; position:relative;">

    <p style="z-index: 2;width: 100%;height:100%;z-index:100; text-align: center; vertical-align: middle;">
        LA EMPRESA
    </p>
    <p style="z-index: 3;width: 100%;height:100%;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
        sunt in culpa qui officia deserunt mollit anim id est laborum
    </p>
</div>

答案 2 :(得分:0)

我认为你需要:

1)为<div>

指定固定高度

2)对position: relative使用<div>position: absolute使用<p>

3)您需要使用JQuery首先向上滑动<p>,以便显示第二个