程序员经验分享-hwhale

如何在不移动其他元素的情况下放大div

2023-12-07

我怎样才能停止这个 div 将所有元素移动到您选择特定价格的位置下方？

要了解我在说什么，请查看此链接：查看价格表样式3在其下方，您可以看到，当您选择某个价格表时，下面的所有元素都会因弹出而移动。我希望能够使用此功能，但当然不能移动下面的所有元素。

我怎样才能做到这一点？

这是 Javascript 的链接：JS

EDIT:

我正在发布相关的 HTML：

<!-- DC Pricing Tables:3 Start -->
  <div class="tsc_pricingtable03 tsc_pt3_style1">
    <div class="caption_column">
      <ul>
        <li class="header_row_1 align_center radius5_topleft"></li>
        <li class="header_row_2">
          <h2 class="caption">Choose plan</h2>
        </li>
        <li class="row_style_4"><span>Web Space</span></li>
        <li class="row_style_2"><span>Bandwidth</span></li>
        <li class="row_style_4"><span>E-mail accounts</span></li>
        <li class="row_style_2"><span>MySQL databases</span></li>
        <li class="row_style_4"><span><a href="#" class="tooltip" rel="Web-based control panel system">CPANEL</a></span></li>
        <li class="row_style_2"><span><a href="#" class="tooltip" rel="24/7 Support via Phone, Email, Web.">24/7 Support</a></span></li>
        <li class="footer_row"></li>
      </ul>
    </div>
    <div class="column_1">
      <ul>
        <li class="header_row_1 align_center">
          <h2 class="col1">starter</h2>
        </li>
        <li class="header_row_2 align_center">
          <h1 class="col1">$<span>5</span></h1>
          <h3 class="col1">per month</h3>
        </li>
        <li class="row_style_3 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">10GB</a></span></li>
        <li class="row_style_1 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">100GB</a></span></li>
        <li class="row_style_3 align_center"><span><a href="#" class="tooltip" rel="Tooltip info.">1</a></span></li>
        <li class="row_style_1 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">1</a></span></li>
        <li class="row_style_3 align_center"><span class="pricing_no"></span></li>
        <li class="row_style_1 align_center"><span class="pricing_yes"></span></li>
        <li class="footer_row"><a href="" class="tsc_buttons2 grey">sign up!</a></li>
      </ul>
    </div>
    <div class="column_2">
      <ul>
        <li class="header_row_1 align_center">
          <h2 class="col2">basic</h2>
        </li>
        <li class="header_row_2 align_center">
          <h1 class="col2">$<span>10</span></h1>
          <h3 class="col2">per month</h3>
        </li>
        <li class="row_style_4 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">30GB</a></span></li>
        <li class="row_style_2 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">200GB</a></span></li>
        <li class="row_style_4 align_center"><span><a href="#" class="tooltip" rel="Tooltip info.">10</a></span></li>
        <li class="row_style_2 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">10</a></span></li>
        <li class="row_style_4 align_center"><span class="pricing_yes"></span></li>
        <li class="row_style_2 align_center"><span class="pricing_yes"></span></li>
        <li class="footer_row"><a href="" class="tsc_buttons2 grey">sign up!</a></li>
      </ul>
    </div>
    <div class="column_3">
      <ul>
        <li class="header_row_1 align_center">
          <h2 class="col3">pro</h2>
        </li>
        <li class="header_row_2 align_center">
          <h1 class="col3">$<span>29</span></h1>
          <h3 class="col3">per month</h3>
        </li>
        <li class="row_style_3 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">100GB</a></span></li>
        <li class="row_style_1 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">500GB</a></span></li>
        <li class="row_style_3 align_center"><span><a href="#" class="tooltip" rel="Tooltip info.">50</a></span></li>
        <li class="row_style_1 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">50</a></span></li>
        <li class="row_style_3 align_center"><span class="pricing_yes"></span></li>
        <li class="row_style_1 align_center"><span class="pricing_yes"></span></li>
        <li class="footer_row"><a href="" class="tsc_buttons2 grey">sign up!</a></li>
      </ul>
    </div>
    <div class="column_4">
      <ul>
        <li class="header_row_1 align_center radius5_topright">
          <h2 class="col4">biz</h2>
        </li>
        <li class="header_row_2 align_center">
          <h1 class="col4">$<span>39</span></h1>
          <h3 class="col4">per month</h3>
        </li>
        <li class="row_style_4 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">Unlimited</a></span></li>
        <li class="row_style_2 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">1000GB</a></span></li>
        <li class="row_style_4 align_center"><span><a href="#" class="tooltip" rel="Tooltip info.">Unlimited</a></span></li>
        <li class="row_style_2 align_center"><span><a href="#" class="tooltip" rel="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">Unlimited</a></span></li>
        <li class="row_style_4 align_center"><span class="pricing_yes"></span></li>
        <li class="row_style_2 align_center"><span class="pricing_yes"></span></li>
        <li class="footer_row"><a href="" class="tsc_buttons2 grey">sign up!</a></li>
      </ul>
    </div>
  </div>
<!-- DC Pricing Tables:3 End -->
<div class="tsc_clear"></div> <!-- line break/clear line -->

还有CSS：

div.tsc_pricingtable03 div.column_1,
div.tsc_pricingtable03 div.column_2,
div.tsc_pricingtable03 div.column_3,
div.tsc_pricingtable03 div.column_4 { /* transitions */ -webkit-transition:box-shadow 0.1s ease; -moz-transition:box-shadow 0.1s ease; -o-transition:box-shadow 0.1s ease; -ms-transition:box-shadow 0.1s ease; transition:box-shadow 0.1s ease;}
div.tsc_pricingtable03 div.column_1:hover,
div.tsc_pricingtable03 div.column_2:hover,
div.tsc_pricingtable03 div.column_3:hover,
div.tsc_pricingtable03 div.column_4:hover { position:relative; z-index:100; left:-5px; top:-15px; /* shadow */ box-shadow:5px 0px 30px rgba(0, 0, 0, 0.5); -webkit-box-shadow:5px 0px 30px rgba(0, 0, 0, 0.5); -moz-box-shadow:5px 0px 30px rgba(0, 0, 0, 0.5);}

你也可以考虑使用CSStransform属性，第四个表中也使用了这种技术。例如：

.some_table .some-table-column:hover {
  transform: scale(1.1);
}

CSS 转换非常适合此目的，因为它们“允许在不中断正常流程的情况下更改受影响内容的位置”.

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

html

Scale

如何在不移动其他元素的情况下放大div 的相关文章

  • CSS3 box-shadow 用于类似重叠的 div

    我正在尝试用css3来实现这种效果 HTML 代码显然是这样的

  • 在 IE 8 及以下版本中动态添加 @font-face 规则

    我使用 IE stylesheet addRule 方法添加 font face 规则 但是 符号对于该方法的 选择器 参数来说是不允许的字符 因此我收到 无效参数 错误 s addrule font face font family Fo

  • 如何使用 javascript 或 jquery 生成 CSS 路径？

    关于如何生成元素的 CSS 路径有什么建议吗 CSS 路径是识别特定元素所需的 css 选择器的路径 例如 如果我的 html 是 div div class bar ul li 1 li li 2 li li span class sel

  • 如何检测浏览器是否支持自定义元素

    我正在查看 Modernizr 它应该有助于功能检测 这应该可以帮助确定您的网站是否与给定的 Web 浏览器兼容 但我没有看到任何表明我可以使用它来检测自定义 HTML 的内容我们在内容中创建和定义的元素 如果不是 Modernizr 我如

  • 为什么自关闭 iframe 标签会阻止显示更多 DOM 元素？

    在 Firefox 和 Safari 上 以下代码仅显示第一个 iframe 而添加结束标签可以解决问题 我不明白为什么它不起作用 当使用 DOMParser 解析第二个示例时 它无论如何都会转换为自关闭 iframe 在这里小提琴 htt

  • 在 javascript/jquery 中将光标更改为等待

    当调用函数时 如何让光标更改为此加载图标以及如何将其更改回 javascript jquery 中的普通光标 在你的 jQuery 中使用 body css cursor progress 然后又恢复正常 body css cursor d

  • 每 3 秒重复一次动画

    我正在使用 WOW js 和 animate css 现在我正在将 CSS 运行到 Infinite 我想知道如何让我的课程运行 3 秒停止并再次开始到无限 My html img src images fork png class for

  • 删除数据表列中的额外填充

    你好 我创建了 JQuery DataTables 如下所示 所以我的问题是如何删除 图片 列中过多的填充 这就是我初始化表的方式 violators tbl DataTable aoColumnDefs bSortable false a

  • 如何更改bootstrap中form-control弹出窗口中必填字段的默认消息？

  • 如何设置菜单按钮和菜单项的样式

    我尝试更改菜单按钮中的样式 我可以更改菜单按钮样式 但不能更改其菜单项 无论我尝试什么 菜单按钮内的菜单项都保持不变 menu button fx background color black menu button label fx ba

  • MVC 在布局代码之前执行视图代码并破坏我的脚本顺序

    我正在尝试将所有 javascript 包含内容移至页面底部 我正在将 MVC 与 Razor 一起使用 我编写了一个辅助方法来注册脚本 它按注册顺序保留脚本 并排除重复的内容 Html RegisterScript scripts som

  • jquery从变量中删除html元素

    我将 html 保存在变量中 var itinerary events today html 我有很多 html 和一个按钮我想删除 它的 ID 为 myButton 如何从变量中保存的 html 中删除它 我建议这种方法 var itin

  • 提交表单并重定向页面

    我在 SO 上看到了很多与此相关的其他问题 但没有一个对我有用 我正在尝试提交POST表单 然后将用户重定向到另一个页面 但我无法同时实现这两种情况 我可以获取重定向或帖子 但不能同时获取两者 这是我现在所拥有的

  • HTML 离线应用程序缓存，列出下载的文件

    作为我正在构建的离线 Web 应用程序的加载屏幕的一部分 使用缓存清单 http developer apple com library safari documentation iPhone Conceptual SafariJSData

  • FireFox 中的自动滚动

    我的应用程序是实时聊天 我有一个 Div 来包装消息 每条消息都是一个 div 所以 在几条消息之后 我的 DOM 看起来像这样 div div Message number two div div div div

  • 更改文本输入标签中文本的大小？

    我有一个很大的文本输入框 但我无法更改字体大小

  • 为什么元素上的负底部边距会降低该元素父元素的高度？

    这可能是由于边距折叠造成的 我知道边距折叠 至少知道它如何影响相邻元素 但我不明白当涉及负边距时它如何在嵌套元素上工作 例如 在此标记和随附的 CSS 中 Markup div class parent div class child Ch

  • 带有相对路径的 LESS CSS 背景

    我在使用 LESS 作为我的网站的样式表时遇到了问题 就我个人而言 我宁愿在CSS中使用相对路径而不是绝对路径 这只是我的习惯 但是现在当我使用带有导入功能的LESS时 我遇到了如下所示的问题 我有一个main less根文件夹中的文件 i

  • 无效字符错误：“fred”

    我确信他一定是一个新手问题 简单来说 我想定义我的第一个 Polymer dart 组件 只是我一直在同一个减速带上踢脚趾 为了使事情变得非常简单 我将其简化为一个非常简单的示例 我做了一个简单的rename示例 跑表 来自 Dart 组件

  • CSS 是否有不等于选择器？

    CSS中有类似 不等于 的东西吗 例如 我有以下代码 input 但对于某些输入 我需要将其作废 我想通过将类 reset 添加到输入标签来做到这一点 例如

随机推荐

  • Javascript：多维数组按指定索引排序？

    如果我有一个如下所示的数组 var array 0 name date bTrue 我将如何按一维数组值之一对该数组进行排序 提前致谢 使用简单的排序回调 var arr 1 5 2 1 8 2 1 2 2 console log arr

  • matplotlib pyplot 颜色条问题

    亲爱的大家 我正在尝试使用带有相关颜色条的颜色来执行散点图 我希望颜色条具有字符串值而不是数值 因为我正在比较两个不同的数据集 每个数据集具有不同的颜色值 但在任何情况下都在最大值和最小值之间 这是我正在使用的代码 import matpl

  • 使用阈值检测对象

    我正在 matlab 中编写一个程序来检测图像序列中的对象 我试图检测的物体是一个红球 首先 我尝试使用阈值从图像中分割球 但我做不到 我无法摆脱球下的阴影 有什么想法如何去除球下的小部分吗 我的第二个问题是 我想确保我正在寻找的物体是一个

  • PHP 致命错误：未捕获异常“异常”并带有消息

    我有一个 PHP 脚本 它连接到 api 并将信息发布到他们的系统 但是当它尝试连接时 它会抛出致命错误 Fatal error Uncaught exception Exception with message Problem with

  • Laravel 环境变量 5.3 设置

    默认情况下 Laravel git 会忽略包含环境设置和配置的 env 文件 我想要一个本地 env 和一个可以提交到我的服务器的生产 env 这样我就不需要手动创建生产设置或触摸 env文件根本不存在 并且可以使用推送来部署技术 有人对此

  • 如何从视频文件的内容 URI 获取文件路径？

    我想附加 Android 存储中的图像或视频文件 当我从图库中选择视频时 它会返回内容 URI 路径 我如何获得文件路径带有内容 URI 的扩展名 我尝试了以下代码 但它在棒棒糖中返回 null void pickVideo Intent

  • 如何向 JScrollPane 添加水平/垂直滚动条

    我想向 JScrollPane 添加水平滚动条 因为我的表格现在如下所示 这是我创建表的代码 this table new JTable this table setShowGrid false this table getTableHea

  • 在 Rails 3 和 Rails 4.1 之间共享 Cookie

    我正在尝试在 Rails 3 和 Rails 4 1 应用程序之间共享 cookie 问题是 Rails 3 cookie 只是 base64 编码 但 Rails 4 1 cookie 是加密的 有没有办法让 Rails 3 和 Rail

  • Laravel 和 MS SQL Server 数据库连接抛出错误“(3/3) QueryException 找不到驱动程序”

    Guys I tried lots of things mentioned in Stackoverflow and laracasts for this issue but none worked hence posting this i

  • UPDATE 语句处于“查询结束状态”

    我们最近升级了在 mysql 服务器版本 5 5 8 上运行的 mysql 数据库 升级后 有时我们会看到简单的升级语句需要 10 秒以上 当我查看进程列表时 它显示所有进程都处于 查询结束 状态 有谁对此有任何想法吗 UPDATE Acc

  • Angular2中如何动态添加克隆节点（相当于cloneNode）

    在 Angular2 中 在某些情况下我需要复制节点而不是移动它 该节点具有 angular2 属性 因此 cloneNode 不起作用 我该怎么做 什么不起作用 let el

  • 将 BSTR 从 C++ DLL 函数传递到 VB6 应用程序

    我的 VB6 应用程序中有以下代码 Private Declare Function FileGetParentFolder Lib Z FileIO dll ByVal path As String As String Output Ad

  • 在 SVN 中创建包含内部版本号和分支名称的文件

    目前我工作的地方没有大量的部署控制 虽然有一个长期计划来创建一个处理部署的构建脚本 但目前我们只是发布我们的解决方案 然后将它们复制到服务器 如果有一个文本文件或类似的文件包含修订号和分支名称 作为实时系统上当前运行的版本的日志 这将非常有

  • Windows 中 sys/mman.h 的等效项

    我在尝试在 Win64 上编译 C 代码时遇到问题 更具体地说 编译器找不到sys mman hheader 据我所知只能在 Unix 环境中找到 我已经知道这是处理内存分配的 我可以使用 Windows 的等效工具来移植代码 第一次尝试

  • Swift 通用协议函数参数

    这似乎对我有用 我想做的就是让Rule协议能够performRule在任何采用该规则协议的结构上 然后返回一个布尔值 但是 按照我的代码当前的方式 我无法访问performRule value value范围 我觉得我错过了一个重要的概念或

  • 轮询 I/O (MIPS)

    我正在尝试在 MIPS 中编写一个程序 该程序使用轮询从键盘读取字符 然后使用内置键盘和显示器 MMIO 模拟器显示它 不幸的是 我无法理解所使用的寄存器和控制位背后的概念 但一直试图从在线示例中找出答案 这是我到目前为止所写的内容 dat

  • 使用套接字通过 Tcp/IP 发送消息

    我正在尝试在客户端 服务器之间发送数据 数据看起来像 typedef Struct Message int id int message length char message str message 我在尝试着Write and Read

  • 当用户滚动离开时如何暂停 YouTube 嵌入

    我一直在尝试寻求帮助 以便在用户滚动离开时让视频暂停 我已经能够找到 html5 视频的帮助 但现在我还需要知道如何使用 youtube API 来实现同样的目的 我嵌入 YouTube 的 html 结构如下 div class ytub

  • HTML5 画布图像上的插图阴影

    我以前见过这个问题 但给出的答案是针对通过路径绘制的画布图像 但是我正在绘制图像 是否有可能创建一个inset shadow context shadowOffsetX 0 context shadowOffsetY 0 context s

  • 如何在不移动其他元素的情况下放大div

    我怎样才能停止这个 div 将所有元素移动到您选择特定价格的位置下方 要了解我在说什么 请查看此链接 查看价格表样式3在其下方 您可以看到 当您选择某个价格表时 下面的所有元素都会因弹出而移动 我希望能够使用此功能 但当然不能移动下面的所有

热门标签