hovering parent div changes 0-width child div to match contained image width
我有几个div,每个div包含一个图标和一个工具提示类型的图像:
-
容器是方形的
height=135px 和width=135px 。 -
图标div主要是正方形的,具有
height=135px ,width=auto ,它是图像height=100% 和width=auto 以保持宽高比。宽度小于高度。 -
工具提示为矩形,
height=135px ,width=auto ,其图像为height=100% 和width=auto 。宽度通常至少是高度的两倍。
图像与Bootstrap 4类对齐。
这些容器div共同构成了一种服务镶嵌。当每个图标图像都悬停时,相应的类似工具提示的图像会从图标的中心出现,并带有"打开书本"动画。我的意思是,子div具有
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!-- container div --> <!-- div containing the icon --> <img height="100%" src="the icon url"> <!-- div containing the tooltip --> <img height="100%" src="the tooltip url"> |
出于布局测试的目的(以下CSS代码),我有一个错误的CSS动画正在执行我想要的特定"工具提示"图像所需的动画,但是当我完成测试并开始添加其余图像时,一切都破裂了。我设置了特定的宽度,并利用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | .dLarge { height: 135px; } /* for different viewports I also have different heights for the icons and tooltips, but for the sake of clarity, let's focus on"dLarge" - 135px height */ .int_Sicon { position:relative; } .int_Sicon .int_Stooltip { visibility: hidden; position: absolute; z-index: 1; overflow: hidden; pointer-events: none; top:0; left: 0; margin:0; -webkit-transition: width 0.3s ease-out, left 0.3s ease-out; -moz-transition: width 0.3s ease-out, left 0.3s ease-out; -o-transition: width 0.3s ease-out, left 0.3s ease-out; transition: width 0.3s ease-out, left 0.3s ease-out; } .int_Sicon .int_Stooltip::after { content:""; position: absolute; } .int_Sicon:hover .int_Stooltip { visibility: visible; left: -100%; } |
所以我开始弄乱JavaScript,这是我最终失败的地方:
1 2 3 4 | var getWidth = $('.int_Stooltip>img').outerWidth(); $('.int_Stooltip').css({'width' : 0}); $('.int_Sicon').hover( $('.int_Sicon>.int_Stooltip').css({'width' : getWidth}); ); |
我到处都在寻找解决方案,但是没有什么适合我想要实现的目标。
我基于以下StackOverflow问题:使用CSS
从中间扩展div,而不是仅从顶部和左侧扩展div
本质上,我想在此https://codepen.io/wintr/pen/wWoRVW的内容上做点什么,除了覆盖按钮的图像而不是背景动画。
我正在使用Bootstrap 4.0 beta 2和Jquery 3.2.1。
我是自学成才,并渴望学习更多。我想念什么?或者至少,我应该看哪里?
如果您尝试在代码笔示例中达到效果。默认情况下,您需要使工具提示居中,宽度为0。可以通过将元素的top,right,bottom和left属性设置为0,然后将其边距设置为auto来使绝对定位的元素居中。然后,当您将鼠标悬停时,宽度应更改为100%。查看下面的代码。我添加了一些颜色和文本只是为了使其可视化,因为没有实际的图像。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .int_Slogo {position:relative; display:inline-block;} .int_Slogo .int_Stooltip { width: 0; position: absolute; z-index: 1; pointer-events: none; overflow: hidden; top:0; right: 0; bottom: 0; left: 0; margin: auto; -webkit-transition: width 0.3s ease-out, left 0.3s ease-out; -moz-transition: width 0.3s ease-out, left 0.3s ease-out; -o-transition: width 0.3s ease-out, left 0.3s ease-out; transition: width 0.3s ease-out, left 0.3s ease-out; } .int_Slogo:hover .int_Stooltip { width: 100%; } |
1 2 3 4 5 | <img src="http://lorempixel.com/400/200/sports/1/Dummy-Text/"> <img src="http://lorempixel.com/400/200/sports/Dummy-Text/"> |
今天早上,我特别受启发,醒悟并提出了解决方案。答案不是在定义div的宽度,而是为图像本身指定css。这就是我想出的。
标记:
1 2 3 4 5 | <img class="dLargeImg m-auto d-block" src="imgsrc"> <img class="dLargeImgs m-auto d-block" src="imgsrc"> |
样式:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | .dLarge { height: 135px; width: 135px; } .dLargeImgs { height:135px; } .int_Sicon { position:relative; display: inline-block; } .int_Sicon .int_Stooltip { position: absolute; top:0; right:0; bottom:0; left: 0; margin:0; z-index: 1; pointer-events: none; overflow: hidden; -webkit-transition: left 0.3s ease-in-out, right 0.3s ease-in-out; -moz-transition: left 0.3s ease-in-out, right 0.3s ease-in-out; -o-transition: left 0.3s ease-in-out, right 0.3s ease-in-out; transition: left 0.3s ease-in-out, right 0.3s ease-in-out; } .int_Sicon:hover .int_Stooltip { left:-50%; right:-50%; } .int_Sicon .int_Stooltip img { width:0; -webkit-transition: width 0.3s ease-in-out; -moz-transition: width 0.3s ease-in-out; -o-transition: width 0.3s ease-in-out; transition: width 0.3s ease-in-out} .int_Sicon:hover .int_Stooltip img { width:100%; } |