html - div 的过渡导致内部 div 行为异常-6ren

html - div 的过渡导致内部 div 行为异常

转载作者：行者123 更新时间：2023-11-27 23:23:15

24

4

我正在制作一个 div，当您将鼠标悬停在上面时，它会向右打开以显示更多详细信息。问题是当我尝试添加过渡时，我的 div 高度变大然后变小以匹配所需的高度，有什么方法可以摆脱高度变化吗？

我试过将两个 div 彼此相邻添加，而不是将它们都放在 div 父级中，问题是让它们匹配高度而不使用像 px 这样的固定大小。

这是 html:

.ProductContainer {
  background-color: #eeeeee;
  width: 100%;
  margin-right: 0;
  float: left;
  transition:width 0.5s;
}

.ProductDiv {
  margin: 1.5%;
  position: relative;
  background-color: #eeeeee;
  width: 20%;
  float: left;
  transition:width 0.5s;
}

.ProductImage {
	width:80%;
	margin:10%;
	float:left;
	
	
}

.ProductName {
	width:100%;
	float:left;
	text-align:center;
	font-family:'Roboto', sans-serif;
	font-size:20px;
	color:#302465;
	font-weight:bold;
	margin-top:2%;
	margin-bottom:10%;
	
}

.ProductDiv:hover {
  width: 40%;
}

.ProductDiv:hover .ProductContainer {
  width: 50%;
}

<div class=ProductDiv>
  <div class=ProductContainer>
    <img src=https://cdn.shopify.com/s/files/1/0533/2089/files/placeholder-images-image_large.png?v=1530129081 alt=Img class=ProductImage>
    <div class=ProductName>Fork</div>
  </div>
</div>

最佳答案

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.ProductDiv {
  background-color: #eeeeee;
  width: 20%;
  float: left;
  transition: 0.5s linear;
  padding: 10px
}

.ProductImage {
  width: 95px;
}

.ProductDiv:hover {
    width: 400px;
}

.ProductDiv:hover .ProductImage {
    width: 95px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class=ProductDiv>
  <div class=ProductContainer>
    <img src=https://cdn.shopify.com/s/files/1/0533/2089/files/placeholder-images-image_large.png?v=1530129081 alt=Img class=ProductImage>
    <div class=ProductName>Fork</div>
  </div>
</div>
</body>
</html>

希望这个解决方案能有所帮助

关于html - div 的过渡导致内部 div 行为异常，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57900932/

24

4

0

文章推荐： javascript - HTML Range 输入增减值问题

文章推荐： html - 元素顺序应该由 HTML 还是 CSS 决定？

文章推荐： javascript - 如何在加载其他页面元素后加载 javascript？

文章推荐： c++ - 将 printf 数据写入 c++/cli 中的字符串变量

java - 让 CompletableFuture 异常()处理 supplyAsync() 异常
问题很简单:我正在寻找一种优雅的使用方式 CompletableFuture#exceptionally与 CompletableFuture#supplyAsync 一起.这是行不通的: priva
java - 从 XSD 生成 Java 异常/使用 JAXB2 绑定(bind)异常
对于 Web 服务，我们通常使用 maven-jaxb2-plugin 生成 java bean，并在 Spring 中使用 JAXB2 编码。我想知道如何处理 WSDL/XSD 中声明的(SOAP-
c - 当我违反数组大小限制时，为什么我没有收到 OutOfBounds 异常(如 Java 异常)或 C 中的任何其他错误？
这个问题已经有答案了: Array index out of bound behavior (10 个回答) 已关闭 8 年前。我对下面的 C 代码感到好奇 int main(){
java - 为什么 MediaPlayer.create 在类的开头初始化时会抛出 NullPointer 异常，而在 OnCreate 方法中初始化时不会抛出 NullPointer 异常？
当在类的开头使用上下文和资源初始化 MediaPlayer 对象时，它会抛出 NullPointer 异常，但是当在类的开头声明它时(因此它是 null)，然后以相同的方式初始化它在onCreate方
java - JAVA 6 中出现 SSL 异常，但 JAVA 8 中没有 SSL 异常
嘿我尝试将 java 程序连接到 REST API。使用相同的代码部分，我在 Java 6 中遇到了 Java 异常，并且在 Java 8 中运行良好。环境相同: 信任机器 unix 用户代
linux - 异常(exception)如下。 org.apache.flume.FlumeException : Unable to load source type in flume twitter analysis 异常
我正在尝试使用 Flume 和 Hive 进行 Twitter 分析。为了从 twitter 获取推文，我在 flume.conf 文件中设置了所有必需的参数(consumerKey、consumer
JavaFX 异常
我在 JavaFX 异常方面遇到一些问题。我的项目在我的 Eclipse 中运行，但现在我的 friend 也尝试访问该项目。我们已共享并直接保存到保管箱文件夹中。但他根本无法让它发挥作用。他在控制台
Jquery模糊()异常
假设我使用 blur() 事件验证了电子邮件 ID，我正在这样做: $('#email').blur(function(){ //make ajax call , check if dupli
调用回调函数时出现C#异常
我这样做是为了从 C 代码调用非托管函数。 pCallback 是一个函数指针，因此在托管端是一个委托(delegate)。 [DllImport("MyDLL.dll")] public stati
Java:异常
为什么这段代码是正确的: try { } catch(ArrayOutOfBoundsException e) {} 这是错误的: try { } catch(IOException e) {} 这段
调用dll函数后未捕获C++异常
我遇到了以下问题:有导出函数的DLL。代码示例如下:[动态链接库] __declspec(dllexport) int openDevice(int,void**) [应用] 开发者.h: __de
析构函数中的c++异常
从其他线程，我知道我们不应该在析构函数中抛出异常!但是对于下面的例子，它确实有效。这是否意味着我们只能在一个实例的析构函数中抛出异常？我们应该如何理解这个代码示例! #include using n
Java基础——异常
为什么需要异常引出 public static void main(String[
Java经典面试题汇总:异常
1. Java的异常机制 Throwable类是Java异常类型的顶层父类，一个对象只有是 Throwable 类的(直接或者间接)实例，他才是一个异常对象，才能被异常处理机制识别。JDK中内
python - “异常”对象不可调用
我是 Python 的新手，我对某种异常方法的实现有疑问。这是代码(缩写): class OurException(Exception): """User defined Exception"
Cassandra ArrayIndexOutOfBoundsException 异常
我已经创建了以下模式来表示用户和一组线程之间的关联，这些线程按他们的最后一条消息排序(用户已经阅读了哪些线程，哪些没有): CREATE TABLE table(user_id bigint, mes
Python 异常 - 捕获除预期之外的所有异常
我正在使用 Python 编写一个简单的自动化脚本，它可能会在多个位置引发异常。在他们每个人中，我都想记录一条特定的消息并退出程序。为此，我在捕获异常并处理它(执行特定的日志记录操作等)后引发 Sys
F# printfn 异常
谁能解释一下为什么这会导致错误: let xs = [| "Mary"; "Mungo"; "Midge" |] Array.iter printfn xs 虽然不是这样: Array.iter pr
安全登录后尝试访问任何页面时发生 JPA 异常
在我使用 Play! 的网站上，我有一个管理部分。所有 Admin Controller 都有一个 @With 和一个 @Check 注释。断开连接后，一切正常。连接后，每次加载页面(任何页面，无论
仅当部署在服务器上而非本地主机上时出现 Azure 异常
我尝试连接到 azure 表存储并添加一个对象。它在本地主机上工作得很好，但是在我使用的服务器上我得到以下异常及其内部异常: Exception of type 'Microsoft.Wind

首页

博学

6Ren·AI

商城

html - div 的过渡导致内部 div 行为异常