我有一个博客元素，它有 2 个子元素：.blog-header（包含背景图像）和 .blog-body。当将鼠标悬停在 .blog-header 上时，我希望图像能够完美缩放。但问题是：图像占据了 .blog-body 应该放置的空间
这是我的代码：
.blog {
background: white;
margin-top: 20px;
border-top: 3px primary solid;
border-bottom 3px solid #eee;
}
.blog .blog-header {
overflow: hidden;
z-index 90;
}
.blog .blog-header .blog-bg-header {
height: 275px;
background-position: center;
background-size: cover;
transition: 0.25s ease-in-out;
}
.blog .blog-header .blog-bg-header:hover {
cursor: pointer;
transform: scale(1.3);
}
.blog-body {
margin: -60px 20px 0 20px;
padding: 20px 20px 10px 20px;
background: white;
z-index 100;
}<article class="blog">
<header class="blog-header">
<div class="blog-bg-header" style="background-image: url('http://placehold.it/1350x750')"></div> …我尝试制作一个简单的 CSS 悬停，但遇到了图像闪烁的问题。我可以做些什么来解决这个问题吗？
同时，由于我对类 ( ) 的 CSS 设置，H3标题和类之间存在空白。有没有办法消除这个差距？看来，所产生的缝隙并不容易消除。.term-image.term-descposition:relative
我需要在鼠标悬停时隐藏图像。
<div class="categorywrapper">
<div class="views-row views-row-1 views-row-odd views-row-first">
<h3 class="term-title">
<a href="/categories/arts-culture">Arts & Culture</a>
</h3>
<div class="term-desc">
<p>This is Arts & Culture</p>
</div>
<div class="term-image"> <a href="#"><img src="http://placehold.it/235x150/ffffee" /></a>
</div>
</div>
.categorywrapper {
width: 720px;
clear:both;
}
.categorywrapper .views-row {
float:left;
position:relative;
width:235px;
}
.categorywrapper .views-row h3 {
position:relative;
margin-left:30px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000;
width:80%;
min-height:38px;
}
.categorywrapper .views-row .term-desc {
position:relative;
top:100px; …使用 .css 时，CSS3transition不适用于 SVG 。pathlinearGradient animate
#loading-frame {
transition: all 1s;
/* fill: transparent; */
/* fill: blue; */
}
#loading-frame:hover {
fill: tomato;
}<svg id="battery" width="110px" height="88px" viewBox="0 0 110 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group" fill="#EAEAEA">
<path d="M104,30.2724875 C104.164709,30.2576038 104.331485,30.25 104.5,30.25 C107.537566,30.25 110,32.7220822 110,35.7458573 L110,53.1708094 C110,56.2060875 107.531385,58.6666667 104.5,58.6666667 C104.331455,58.6666667 104.164681,58.6590557 104,58.6441617 L104,82.0033234 C104,85.3151964 101.311488,88 97.9970362,88 L6.0029638,88 C2.68761844,88 0,85.3182852 0,82.0033234 L0,5.99667663 C0,2.68480358 2.68851188,0 6.0029638,0 L97.9970362,0 C101.312382,0 104,2.68171476 …当您将鼠标悬停在 iframe 属性上时，我无法禁用该元素的效果。有没有其他方法可以解决当前的问题？
这是我的代码和原始解决方案：
iframe id="clock1" src="http://free.timeanddate.com/clock/i52azneg/n2253/szw110/szh110/hbw0/hfc000/cf100/hgr0/fav0/fiv0/mqcfff/mql15/mqw4/mqd94/mhcfff/mhl15/mhw4/mhd94/mmv0/hhcbbb/hmcddd/hsceee" frameborder="0" width="110" height="110"></iframe>
script>
$("iframe#clock1").contents().find("#hov").hide();
/script>
我目前正在尝试找出一种方法，以便将鼠标悬停在我的网站（http://thefloodplains.com/）首页上的每个单独的框上时，该特定框会出现阴影动画。我希望它看起来与此页面上的内容非常相似：http://tobiasahlin.com/blog/how-to-animate-box-shadow/。我已使用此页面作为尝试设置悬停阴影效果的指南。
这是专门针对我的网页 ( http://thefloodplains.com/ ) 上的 div 框的 CSS/HTML：
.col-md-4 {
color:#00A5D1;
height:300px;
}
.col-md-3 {
color:#00A5D1;
height:300px;
box-shadow: 2 2px 3px rgba(0, 0, 0.1, 0.1);
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.col-md-4:hover {
background-color: #FFE097;
}
.col-md-3:hover {
-webkit-transform: scale(1.25, 1.25);
transform: scale(1.25, 1.25);
}
.col-md-4 h3 {
position: relative;
top: 40%;
transform: translateY(-50%);
}
.col-md-4 {
color:#00A5D1;
height:300px;
border: 1px solid #FF8B6F;
position: relative;
} …我有一个 2 级下拉菜单，鼠标必须穿过相当狭窄的走廊才能保持菜单打开，如果它偏离轨道，菜单会意外关闭，这令人沮丧。我想让菜单不立即关闭，而是延迟关闭。
这是一个用 css 制作的标准菜单，如下所示：
ul.menu li ul {
display: none;
}
ul.menu li:hover ul {
display:block;
}
我需要当不再有悬停状态时，菜单仍然可见至少 0.5 秒。
已经尝试过这个，但它不起作用：
<script>
$( ".menu li" ).mouseout(function() {
$(".menu li ul").css("display: block");
$(".menu li ul").css.setTimeout("display: none", 2000);
});
</script>
我试图在将鼠标悬停在 div 上时更改内容的颜色，包括 h4 标题，但标题不会变成白色。不知道我如何才能实现这一目标：
.iconbox-blue {
background: #fff;
color: #000;
}
.iconbox-blue:hover {
color: #fff;
background: blue;
}<div class="iconbox-blue">
<a href=''>
<h4 class="icon-box-title">Header</h4>
</a>
<p class="icon-box-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>我究竟做错了什么？当鼠标悬停在 div 上时，如何使 h4 标题颜色变为白色iconbox-blue？
例子：
.btn {bg-blue-500 text-2 text-orange-300}
.btn2 {bg-orange-500 text-2 text-blue-300}
编辑：很抱歉我忘记包含我正在使用的代码......那是深夜。
< button className="btn hover:btn2"/> <---this does not work btn2 does not actually get applied as a hover
btn当然会出现，但是悬停时，btn2样式不会出现。
如果我做了一些愚蠢的事情或者我明显错过了文档中已经说明的内容，请随时为我指出方向。
我尝试过搜索，但我在兜圈子，我只是有很多样式，我想通过在不同的状态下应用它们来改变功能，但这将是一个痛苦，因为我必须创建一个单独的.btn .btn2 btn2-hover btn-hover等。 。 ETC..
是变体问题吗？css或者它是一个按一定顺序读取的过程？难道我期望将悬停应用于所有内部，css而实际上并没有这样做？或者我需要做出一些例外吗？我很混乱。
我正在尝试对演示站点执行鼠标悬停操作，但在执行鼠标悬停时遇到问题。
我想检查悬停时的颜色或文本，但我没有这样做。
网站： https: //demo.nopcommerce.com/
步骤：登录应用程序选择注册，考虑定位器并执行鼠标悬停。
我的代码：
cy.visit('https://demo.nopcommerce.com/')
cy.get('.ico-register')
.trigger('mouseover')
.should('have.css', 'cursor', 'pointer')
.wait(1000) // Adjust the delay time as needed
.should('have.css', 'color', 'rgb(74, 178, 241)')
错误 ：
断言预期 <a.ico-register> 具有值为 rgb(74, 178, 241) 的 CSS 属性 color，但值为 rgb(119, 119, 119) AssertionError 预期 '<a.ico-register>' 为CSS 属性“color”的值为“rgb(74, 178, 241)”，但值为“rgb(119, 119, 119)”
注意：1：rgb（119,119,119）这是悬停之前的颜色，它显示的颜色与悬停之后相同
2：在此，当我尝试手动将鼠标悬停在注册选项卡上时，测试用例正在通过
这个工作:
<td onmouseover="document.getElementById('textbox').innerHTML='Hidden text'" onmouseout="document.getElementById('textbox').innerHTML='Show text'">
<div id="textbox">Show text</div>
</td>
但是这个没有:
<td onmouseover="document.getElementByClassName('textbox').innerHTML='Hidden text'" onmouseout="document.getElementByClassName('textbox').innerHTML='Show text'">
<div class="textbox">Show text</div>
</td>
我怎样才能解决这个问题？我需要一个课程不止一次地使用它.