对不同的网格项目重用css hover stlye
对不同的网格项目重用CSS hover样式，可以通过以下几种方式实现：
- 使用类选择器：为每个网格项目定义一个共同的类名，并在CSS中使用该类名来定义hover样式。例如：
HTML代码：
<div class="grid-item">网格项目1</div>
<div class="grid-item">网格项目2</div>
<div class="grid-item">网格项目3</div>CSS代码：
.grid-item:hover {
/* hover样式 */
background-color: #ff0000;
color: #ffffff;
}- 使用CSS预处理器：如果你使用CSS预处理器如Sass或Less，可以使用循环和混合器来重用hover样式。例如，使用Sass的@for循环和@mixin混合器：
@for $i from 1 through 3 {
.grid-item-#{$i}:hover {
/* hover样式 */
background-color: #ff0000;
color: #ffffff;
}
}生成的CSS代码：
.grid-item-1:hover {
/* hover样式 */
background-color: #ff0000;
color: #ffffff;
}
.grid-item-2:hover {
/* hover样式 */
background-color: #ff0000;
color: #ffffff;
}
.grid-item-3:hover {
/* hover样式 */
background-color: #ff0000;
color: #ffffff;
}- 使用CSS后处理器：如果你使用CSS后处理器如PostCSS或Autoprefixer，可以使用插件来自动生成重用hover样式的CSS代码。例如，使用PostCSS的autoprefixer插件：
CSS代码：
.grid-item:hover {
/* hover样式 */
background-color: #ff0000;
color: #ffffff;
}生成的CSS代码：
.grid-item:hover {
/* hover样式 */
background-color: #ff0000;
color: #ffffff;
}
.grid-item:focus {
/* focus样式 */
outline: none;
}以上是对不同的网格项目重用CSS hover样式的几种方法。根据具体的项目需求和开发环境，选择适合的方法来实现重用样式。
相关·内容
当我想放置一个3x9的网格时，我正在处理一个网站。网格中的项应该在网格中的特定位置，所以我基本上创建了27个网格项，在每个网格项中，我按如下方式设置行和列： .grid-item1 { background-color现在，我想添加一个效果，一旦鼠标悬停，就会使每个网格项目移动。 这是否意味着我现在需要为它们中的每一个创建27 ..grid item
浏览 15提问于2021-10-07得票数 0
回答已采纳
1回答
我有一组通过CSS Grid布局尽可能“自动”排列的div磁贴；我的最后一个想法是，即使我不知道有多少磁贴，它们的大小和位置都是正确的。这工作得很好。grid-row: span 2;如果我点击任何不在最右边列的磁贴，我都会对结果感到满意。当最右边的瓦片被展开时，它们会被包裹到下一行。
浏览 1提问于2017-07-10得票数 10
回答已采纳
1回答
我有多个CSS样式的链接悬停状态。基本链接悬停样式： opacity: .7;然后，我有网格元素，它们本身就是链接，具有转换样式；但是，我不希望它们的不透明度改变.但我似乎不能让它发挥作用对吧？下面是整个网格和网格元素的代码：<div class="prevnextgrid">
<a href="link I'm usin
浏览 1提问于2021-12-27得票数 0
回答已采纳
在查找在线资源和文档时，这些属性的大多数文档似乎引用的是Flex-box，而不是网格。我不知道Flex-box中的等价属性的文档如何适用于网格。因此，我尝试引用，它将它们定义为：justify-content -此属性使网格沿行轴对齐。
自定义()--沿行轴对齐网格项中的内容。Flex-box中的justify-items属性与网格
浏览 0提问于2018-01-31得票数 103
回答已采纳
我正在使用React处理一个表格组件，我遇到了一个大型表格集合(> 500行)的问题。事实上，当我试图突出显示我点击的行时，我遇到了性能上的大泄漏。为了实现行选择，我在顶部组件中保持一个包含当前活动行的状态，该组件由表中所有行的容器组成。当我单击一个单元格时，我正在用该单元格所在的行更新此状态。这会触发render()方法，我的顶部组件和整个应用程序都会因为大量的元素重新呈现而变得很慢。
如何仅重新呈现选定的行？是否有一个通用<
浏览 2提问于2017-08-18得票数 6
1回答
我想出了一个主要基于PHP的web应用程序。我想知道一些最好的做法和技术，我可以利用，以尽快推出的应用。我的团队将远程工作，所以我想知道通过网络资源进行协作的最佳方法。我期待在这里，选择或一个技术框架，可以让我在更短的时间内获得一个伟大的应用程序。我在这里举了一个小例子。请延长我的计划并给我建议..。服务器端脚本- PHP (用于快速development)Client端脚本的CakePHP)- JS (用于快速开发的</em
浏览 2提问于2010-10-23得票数 2
回答已采纳
我还没有找到一个可以效仿的简单的例子。当前悬停时的选择如下所示：
我已经编写了以下函数来尝试突出显示整个行(锁定和未锁定的部分)，但我似乎无法获得正确的jQuery选择器： }, //stuff to do on mouse leave
$("#ddhintgrid .k-state-<e
浏览 3提问于2016-03-10得票数 1
我想使用jQuery.css()属性对链接的属性进行着色。最简单的方法是使用$el.css({"color" : "red"});var $el = $("#test");
通过重用$el和其他一些代码，我仍然可以访
浏览 0提问于2011-09-08得票数 1
回答已采纳
3回答
我试图实现一个“揭示”的效果，当我从一个网格显示项目时，他们悬停。这里一切都还好，但一旦暴露了，我想让它们在X秒后再次消失，所以这并不是说，当你把鼠标从物品中移开时，它们就会瞬间消失。到目前为止，这是我尝试过的，但是在我把鼠标从项目中去掉之后，这些项目不会回到它们的“未公开”状态。var timeout; clearTimeout(timeout)
浏览 5提问于2020-09-03得票数 1
回答已采纳
3回答
垂直对齐悬停图像img
、、、、
我有一个网格的图像具有相同的宽度，但不同的高度。 <a href="#" class="zoom"">
<img src="img/hover-i
浏览 0提问于2014-09-03得票数 0
1回答
CSS网格与变换的结合
、、、
有没有办法将CSS网格与转换结合起来，在网格布局中移动div？例如，如果用户单击Box B(它将扩展到占用当前由它自己和方框C和F所持有的空间)，我如何使用转换将C和F从新占用的空间中移出，进入网格中当前无人占用的空间？
浏览 3提问于2017-07-03得票数 10
回答已采纳
1回答
我有两个几乎完全相同的动画。它们之间的区别是“左对右”的定位。我想为.forward和.backward重用第一块代码……我猜这可以通过使用数据或变量来完成，但我不确定如何进行。谢谢你的帮助$('.hover-area').hover(function() {
$(this).find(.animate(
浏览 0提问于2012-05-26得票数 1
1回答
我正在尝试创建一个网格，我一直在研究使用Flexbox和CSS grid的几种解决方案，但是这些解决方案都不适合我，这就是我发布这个的原因。
我不想使用CSS
浏览 6提问于2017-11-06得票数 0
1回答
我使用的是ui网格，第一列必须固定在左边。当用户停留在一行时，我希望突出显示整个行，这是合乎逻辑的。 background-color: red;柱塞：。
你知道怎么做吗？理想情况下，只使用ui网格</e
浏览 2提问于2016-12-01得票数 0
回答已采纳
1回答
因此，我正在为我正在处理的一个项目创建一个特定于项目的组件UI库。它需要特定的风格化组件，并且它们的许多元素都会被重用。我注意到我在HTML模板文件和样式文件之间切换了很多，并重复了许多样式代码样板(类似的CSS属性，但值不同)，我想也许我可以通过创建一个自定义指令来“角化”我做样式的方式，然后它要么应用与固定CSS样式相关的CSS类(比如输入域/按钮)，要么使用常用属性
浏览 27提问于2021-07-24得票数 0
3是否通过向网格容器中添加一个css类来“模拟”一个较小的屏幕？ </div>是否有一个内置类可以添加到.container元素(如.si
浏览 1提问于2014-07-18得票数 5
回答已采纳
4回答
当鼠标悬停时，我需要一个代码片段来突出显示表格行。如果它有jquery tablesorter插件，我无法添加这个功能。
浏览 2提问于2011-04-25得票数 1
3回答
在写css hack时，:hover {}的样式工作起来很有趣，但浏览器对完整链接和散列标签的a:hover处理方式不同。来自:hover { color: #ff5e99; text-decoration:overline; background: #222}
对于这段代码，悬停在<a href='http:&
浏览 1提问于2011-03-12得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
