当悬停其他内容时，下拉/在一个区域显示特定内容

Drop down / Show specific content in one area when hovering other content

本文关键字：一个 区域 显示 其他 悬停 下拉      更新时间：2023-09-26

我有一个问题，我想这个问题对大家都有帮助，那就开始吧。

我做了这张图，它将总结我所需要的:我需要做什么

所以我需要显示内容(在我的例子中是带有n°1的大红色框，因为我想象我们正在悬停图片的第一步部分)，根据鼠标悬停的位置，在一个特定的区域。

我需要这个内容在页面显示时将页面的其余部分推到底部。或者更简单的做法是，悬停内容可以直接下拉到页面的内容上。我还需要这个内容出现一个过渡。

是否可以在纯CSS中做到这一点?我目前有这个:

#hover-content {
    display:none;
}
#parent:hover #hover-content {
    display:block;
}
<div id="parent">
    <div id="original">
    Original content
    </div>
    <div id="hover-content">
       Content displayed when hovering
    </div>
    Some content below, which is pushed to the bottom by the hover content
</div>

这个还不错，但是没有过渡，我不知道我是否可以用它来处理4个有不同悬停内容的盒子。

还有这个，可能也有帮助:

#hover-content {
  display:hidden;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
#parent:hover #hover-content {
  visibility: visible;
  opacity: 1;
}
<div id="parent">
  <div id="original">
    My original content
  </div>
  <div id="hover-content">
    The content which displays only when hovering the original content
  </div>
  
</div>
Some content below

这个有一个过渡，但不下拉，当没有显示时留下空白…

我想我离我的目标还很远。有什么建议吗?

您不能仅对CSS执行此操作。你只能通过悬停来影响其他元素，如果它们是悬停元素的直接兄弟元素。

使用简单的JQuery和一些属性。获取属性，创建id，并显示元素。

HTML(示例):

<div id="parent">
    <table>
        <tr>
            <td hover-content="apples">Apples</td>
            <td hover-content="oranges">Oranges</td>
        </tr>
        <tr>
            <td hover-content="limes">Limes</td>
            <td hover-content="blueberries">Blueberries</td>
        </tr>
    </table>
</div>
<div class="hide">
    <div id="apples"> Hello there apples </div>
    <div id="oranges"> Hello there oranges </div>
    <div id="limes"> Hello there limes </div>
    <div id="blueberries"> Hello there blueberries </div>
</div>
CSS: 

#parent > table {
    width: 200px;
    height: 100px;
}
#parent > table td {
    width: 50%;
    text-align: center;
    border: 2px solid red;
}
.hide > div {
    display: none;
}
JQuery: 

$(document).ready(function() {
    $("#parent td").hover(function() {
        // Get attribute
        var hoverContent = $(this).attr("hover-content");
        console.log(hoverContent);
        // Hide others, remove this for different style of animation
        $(".hide > div").hide();
        // Slide open
        $("#" + hoverContent).stop().slideToggle();
    })
})

小提琴:https://jsfiddle.net/mo1b0j4k/

完全有可能，您只需要转换高度-参见下面的示例

我在这里使用了max-height，这意味着你只需要确保:hover风格下的max-height值只需要大于hover-content的height(这意味着你不需要知道确切的height过渡到)。

#hover-content {
    max-height: 0;
    transition: max-height 1s ease;
    overflow: hidden;
}
#parent:hover #hover-content {
    max-height: 100px;
}
<div id="parent">
    <div id="original">
        Original content
    </div>
    <div id="hover-content">
         Content displayed when hovering
    </div>
</div>
Some content below, which is pushed to the bottom by the hover content

这可能是另一个可以帮助您的选择:

http://codepen.io/adamk22/pen/pbPbBq 

#original1,
#original2,
#original3,{
  width: 100px;
  height: 100px;
  background: red;
  display: inline-block;
  transition: 1s;
}
#hover-content1, 
#hover-content2, 
#hover-content3 {
  width: 100px;
  height: 100px;
  background: blue;
  display: inline-block;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
#original1:hover ~ #hover-content1,
#original2:hover ~ #hover-content2,
#original3:hover ~ #hover-content3,{
  visibility: visible;
  opacity: 1;
}

这可能是您正在寻找的纯css解决方案。

#hover-content {
  display: hidden;
  visibility: hidden;
  opacity: 0;
  height: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
#parent:hover #hover-content {
  display: block;
  height: auto;
  visibility: visible;
  opacity: 1;
}
<div id="parent">
  <div id="original">
    My original content
  </div>
  <div id="hover-content">
    The content which displays only when hovering the original content
  </div>
  
</div>
Some content below

相关文章：