我正在尝试实现一个简单的：悬停效果，当悬停时图像徘徊扩大。 奇怪的是，当我在Chrome开发工具中单击“强制元素状态”中的：悬停单选按钮时，效果按预期工作，但当我实际悬停在图像上时，没有骰子。 任何见解都将非常感谢！
这是我的标记（图像有半透明覆盖）
<article class="news-loop_item"> <img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af- s_dx_18-300mmf_35-56g_ed_vr/img/sample/sample4_l.jpg" class="news- loop_img" alt="featured image"> <div class="news-loop_overlay"> <h2 class="news-loop_title">Title</h2> <p class="news-loop_date">Date</p> <div class="news-loop_summary">Summary</div> </div> </article>而我的scss
.news-loop { flex-wrap: wrap; margin: -1rem; } .news-loop_item { flex-basis: calc(100% / 2 - 2rem); height: 20rem; margin: 1rem; overflow: hidden; position: relative; } .news-loop_img { height: 100%; object-fit: cover; overflow: hidden; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; position: relative; vertical-align: middle; width: 100%; } .news-loop_img:hover { -webkit-transform: scale(1.15, 1.15); transform: scale(1.15, 1.15); } .news-loop_overlay { background: rgba(0, 0, 0, .75); height: 100%; left: 0; position: absolute; top: 0; width: 100%; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .news-loop_overlay:hover { background: rgba(0, 0, 0, .5); }https://codepen.io/evanhickman/pen/ZXOmWb
I'm trying to achieve a simple :hover effect where the image hovered scales up when hovered. Strangely, when I click the :hover radio button in the "Force element state" in Chrome dev tools, the effect works as expected, but when I actually hover over the image, no dice. Any insight would be much appreciated!
This is my markup (the image has a semi opaque overlay)
<article class="news-loop_item"> <img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af- s_dx_18-300mmf_35-56g_ed_vr/img/sample/sample4_l.jpg" class="news- loop_img" alt="featured image"> <div class="news-loop_overlay"> <h2 class="news-loop_title">Title</h2> <p class="news-loop_date">Date</p> <div class="news-loop_summary">Summary</div> </div> </article>And my scss
.news-loop { flex-wrap: wrap; margin: -1rem; } .news-loop_item { flex-basis: calc(100% / 2 - 2rem); height: 20rem; margin: 1rem; overflow: hidden; position: relative; } .news-loop_img { height: 100%; object-fit: cover; overflow: hidden; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; position: relative; vertical-align: middle; width: 100%; } .news-loop_img:hover { -webkit-transform: scale(1.15, 1.15); transform: scale(1.15, 1.15); } .news-loop_overlay { background: rgba(0, 0, 0, .75); height: 100%; left: 0; position: absolute; top: 0; width: 100%; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .news-loop_overlay:hover { background: rgba(0, 0, 0, .5); }https://codepen.io/evanhickman/pen/ZXOmWb
最满意答案
原因是你的悬停选择器是错误的，看看这个：
.news-loop_item:hover .news-loop_img { -webkit-transform: scale(1.15, 1.15); transform: scale(1.15, 1.15); }查看父元素是否需要悬停事件。
The reason why is that your hover selector is wrong, check out this:
.news-loop_item:hover .news-loop_img { -webkit-transform: scale(1.15, 1.15); transform: scale(1.15, 1.15); }See the parent element needs the hover event.
Css Transform：Scale仅适用于Dev Tools(Css Transform: Scale Only Works in Dev Tools)我正在尝试实现一个简单的：悬停效果，当悬停时图像徘徊扩大。 奇怪的是，当我在Chrome开发工具中单击“强制元素状态”中的：悬停单选按钮时，效果按预期工作，但当我实际悬停在图像上时，没有骰子。 任何见解都将非常感谢！
这是我的标记（图像有半透明覆盖）
<article class="news-loop_item"> <img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af- s_dx_18-300mmf_35-56g_ed_vr/img/sample/sample4_l.jpg" class="news- loop_img" alt="featured image"> <div class="news-loop_overlay"> <h2 class="news-loop_title">Title</h2> <p class="news-loop_date">Date</p> <div class="news-loop_summary">Summary</div> </div> </article>而我的scss
.news-loop { flex-wrap: wrap; margin: -1rem; } .news-loop_item { flex-basis: calc(100% / 2 - 2rem); height: 20rem; margin: 1rem; overflow: hidden; position: relative; } .news-loop_img { height: 100%; object-fit: cover; overflow: hidden; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; position: relative; vertical-align: middle; width: 100%; } .news-loop_img:hover { -webkit-transform: scale(1.15, 1.15); transform: scale(1.15, 1.15); } .news-loop_overlay { background: rgba(0, 0, 0, .75); height: 100%; left: 0; position: absolute; top: 0; width: 100%; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .news-loop_overlay:hover { background: rgba(0, 0, 0, .5); }https://codepen.io/evanhickman/pen/ZXOmWb
I'm trying to achieve a simple :hover effect where the image hovered scales up when hovered. Strangely, when I click the :hover radio button in the "Force element state" in Chrome dev tools, the effect works as expected, but when I actually hover over the image, no dice. Any insight would be much appreciated!
This is my markup (the image has a semi opaque overlay)
<article class="news-loop_item"> <img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af- s_dx_18-300mmf_35-56g_ed_vr/img/sample/sample4_l.jpg" class="news- loop_img" alt="featured image"> <div class="news-loop_overlay"> <h2 class="news-loop_title">Title</h2> <p class="news-loop_date">Date</p> <div class="news-loop_summary">Summary</div> </div> </article>And my scss
.news-loop { flex-wrap: wrap; margin: -1rem; } .news-loop_item { flex-basis: calc(100% / 2 - 2rem); height: 20rem; margin: 1rem; overflow: hidden; position: relative; } .news-loop_img { height: 100%; object-fit: cover; overflow: hidden; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; position: relative; vertical-align: middle; width: 100%; } .news-loop_img:hover { -webkit-transform: scale(1.15, 1.15); transform: scale(1.15, 1.15); } .news-loop_overlay { background: rgba(0, 0, 0, .75); height: 100%; left: 0; position: absolute; top: 0; width: 100%; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .news-loop_overlay:hover { background: rgba(0, 0, 0, .5); }https://codepen.io/evanhickman/pen/ZXOmWb
最满意答案
原因是你的悬停选择器是错误的，看看这个：
.news-loop_item:hover .news-loop_img { -webkit-transform: scale(1.15, 1.15); transform: scale(1.15, 1.15); }查看父元素是否需要悬停事件。
The reason why is that your hover selector is wrong, check out this:
.news-loop_item:hover .news-loop_img { -webkit-transform: scale(1.15, 1.15); transform: scale(1.15, 1.15); }See the parent element needs the hover event.
发布评论