将鼠标悬停在多个内容上以展开

Posted 2023-05-08

【中文标题】将鼠标悬停在多个内容上以展开

【英文标题】：Hovering over multiple Content to expand

【发布时间】：2014-07-15 08:36:53

【问题描述】：

我有一个问题，所以，在我的标题下方是我的菜单框，它们将在悬停在它们上方时展开并显示内容。到目前为止，我有 3 个框，但是当我将鼠标悬停在 1 个框上时，我如何设法进行转换，其他 2 个框调整大小/重新定位，以便第一个框（mainCONntent）扩展并且读者可以很好地查看它。将鼠标悬停在所有框上时也应如此。请帮忙。

<div id="mainContent">Content goes here</div>
  <aside id="biographie">
    <h1>Content goes here</h1>
    </aside>
<div id="projects" class="clearOne">Content goes here<div>

CSS：

#mainContent 

height: 250px;
width: 200px;
float: left;
font-family: cuprum;
line-height: 25px;
-webkit-transition: all 0.8s ease-in-out 0s;
-o-transition: all 0.8s ease-in-out 0s;
transition: all 0.8s ease-in-out 0s;
opacity: 0.5;
display: block;
overflow-y: hidden;
padding-top: 5px;
padding-right: 20px;
padding-bottom: 60px;
padding-left: 5px;
text-align: left;
background-image: -webkit-linear-gradient(309deg,rgba(250,65,255,0.45) 0%,rgba(255,116,234,0.19) 100%);
background-image: linear-gradient(141deg,rgba(250,65,255,0.45) 0%,rgba(255,116,234,0.19) 100%);


#mainContent:hover 
-webkit-transform: 2;
-o-transform: 2;
transform: 2;
-webkit-opacity: 1;
opacity: 1;
width: 600px;
height: 350px;
margin-top: 5px;
padding-left: 20px;
padding-top: 20px;
vertical-align: middle;
transition: all 0.8s ease-in-out 0s;


#projects 
background-color: rgba(234,197,244,0.14);
height: 350px;
width: 454px;
float: left;
padding-top: 26px;
padding-right: 5px;
padding-bottom: 30px;
margin-bottom: 90px;
font-family: cuprum;
line-height: 25px;
left: 352px;
position: absolute;
top: 405px;


#biographie 
float: left;
width: 136px;
height: 200px;
padding: 0px 5px;
position: relative;
font-family: cuprum;
font-style: normal;
font-weight: 400;
left: 2px;
-webkit-transition: all 0.8s ease-in-out 0s;
-o-transition: all 0.8s ease-in-out 0s;
transition: all 0.8s ease-in-out 0s;
overflow-y: hidden;
background-image: -webkit-linear-gradient(270deg,rgba(181,217,240,0.17)      0%,rgba(190,133,232,0.27) 100%);
background-image: linear-gradient(180deg,rgba(181,217,240,0.17) 0%,rgba(190,133,232,0.27) 100%);

【问题讨论】：

请将您的代码缩小到the minimum, which still demonstrates the problem。这是相当多的代码，我敢肯定，演示这种效果并不需要全部。

@Joeytje50 - 代码真的不多（只有四个声明和一个小的 html sn-p）。发布一个有效的jsfiddle.net 来证明这个问题会更好。

对不起，这是我第一次使用它。我会尽量缩小范围

你贴了很多代码，我们看不懂。现在您的网站看起来像这样..link.. 现在让我们知道您需要什么

jsfiddle.net/36h36/4 我尝试在 jsfiddle 中执行此操作。我是 html 新手，我正在努力学习这一点。谢谢

【参考方案1】：

我认为最好使用 javascript。或jQuery .. 或阅读此页面 Use :hover to modify the css of another class?

&

我使用了这个 jquery 代码

$("#mainContent").hover(
    function()
        $("#projects").css("width":200,"height":200);
        $("#biographie").css("width":200,"height":200);
    ,function()
        $("#projects").css("width":100,"height":100);
        $("#biographie").css("width":100,"height":100);
);

看这个http://jsfiddle.net/36h36/6/

【讨论】：

哦，我才刚开始学jquery。那么我应该停止这种设计吗？这个想法是每个框都充当页面（主页、传记、项目、联系人等），当加载页面时，它们会有一些随机的形状，当悬停在“主页”框上时，它会有一个动画扩展并且盒子和文本变得可见，同时其他盒子改变形状，以便所有东西都被组织起来并适合“包装”。这是我的想法，但我想我需要更多地了解 jquery。谢谢