我试图连接这两个悬停类，因此它们同时激活：
#recent-posts .content:hover {
-webkit-box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.04);
-moz-box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.04);
box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.04);
}
#recent-posts img:hover {
outline: 11px solid #ff7454;
margin-bottom:
浏览 0提问于2014-07-10得票数 0
回答已采纳
1回答
边界元和覆盖引导样式
、、、
大约30分钟前，我就开始看BEM了，我用它来了我的第一个路障。
我正在用twitter引导构建一个项目，我决定在我的风格中使用BEM架构，我尝试了在堆叠列表上重写引导悬浮效果，但这是行不通的。
<ul class="nav nav-stacked side-nav">
<li class='side-nav__item'><a href="#">Link</a></li>
<li class='side-nav__item'><a hre
浏览 3提问于2017-08-02得票数 1
2回答
我刚刚学到了BEM，我想用它组织我的CSS。如何用边界元组织我的CSS？BEM网站不告诉您如何用边界元法组织CSS；该网站只告诉您如何命名块、元素和修饰符。
另外，每个网页应该使用不同的样式表，还是应该使用SASS并将所有scss.files合并到一个CSS文件中？
/********************************
BLOCKS
********************************/
/********************************
ELEMENTS
********************************/
/*******
浏览 0提问于2019-03-14得票数 3
回答已采纳
2回答
在将CSS转换为列内的元素时，是否存在已知的问题？
我在webkit (Safari和Chrome)上有问题，没有测试其他.
我制作了，其中将转换(在悬停时)应用于位于列内的图像。问题发生在除第一列之外的所有列上，它不会呈现应用的筛选器或转换。
第一列按预期工作，如果我删除这些列，也会呈现ok。
这是CSS的一个相关部分：
#photos img {
width: 100% !important;
height: auto !important;
opacity: 1;
-webkit-filter:
浏览 4提问于2014-02-23得票数 4
回答已采纳
1回答
由于在我所从事的项目中使用BEM的性质，我发现我自己和其他人在我们的CSS文件中使用以下内容：
[class*="something"] { ... }
[class*="__something-else"] { ... }
[class*="--other-stuff"] { ... }
[class*="more-things"] { ... }
[class*="__even-more"] { ... }
是否有一个可取的解决办法来缩短以上，以防止冗长的重复单词class，还是我们应该坚持这种方法？
浏览 3提问于2016-06-05得票数 2
回答已采纳
3回答
使用BEM和SASS声明活动/焦点/悬停状态的正确方法是什么？例如，我有这样的结构：
<div class="card">
<img class="card__image" src="..." alt="">
<div class="card__overlay">
<div class="card__title"></div>
</div>
</div>
和SCSS：
浏览 1提问于2015-12-01得票数 19
4回答
纯CSS下拉菜单
、、
我正在尝试设计一个100%的CSS和HTML下拉菜单，就像在上看到的那样。当您将鼠标悬停在导航链接上时，一个新的div会出现在您所悬停的那个div的正下方。
我要做的就是使用#nav li a:hover submenu {让.submenu出现在嵌套到的<li>下面。据我所知，当a元素悬停在上面时，这个CSS选择器应该选择.submenu DIV吗？但它不起作用。
#nav {
list-style-type: none;
margin: -5px 0px 0px 5px;
}
#nav li {
display: inline;
}
#nav li a {
浏览 2提问于2011-04-30得票数 2
2回答
我尝试仅在两个不同的类附加到div时才应用CSS :hover选择器。我已经尝试过了，但这消除了悬停效果。
.accordionButton .cyan:hover{
color: cyan;
}
我也不能这样做：
.accordionButton:hover, .cyan:hover{
color: cyan;
}
因为我还有另外两种颜色，我也在尝试这样做。
基本上，有没有办法让CSS仅在同时是.accordionButton和.cyan的div上悬停时应用？
浏览 5提问于2013-02-08得票数 6
回答已采纳
1回答
我非常喜欢BEM，我通常使用BEM的一个变体，其中我使用状态类来切换子项的开/关，这使得我的SASS中的规则很容易理解，比如：
.my-block{
&__element {
color : blue;
// I prefer state-classes over modifiers for state
&.is-selected { color : red; }
&--small { height: 50%; }
}
}
我想知道如何以最具BEM风格的方式解决的问题是如何处理javascript中的状态更改，该更改应该应用于
浏览 5提问于2017-01-22得票数 2
回答已采纳
我已经尝试添加一个悬停效果到每个元素在网站上，但*:hover没有工作。
我尝试过不同的html标记，但只有一些会允许这种悬停操作，例如示例中的a标记。
*,
*:before,
*:after {
box-sizing: border-box;
}
* {
border: solid .5px #dbdbdb;
}
*:hover {
border: solid .5px #737373;
}
<div>
<h1>Example Domain</h1>
<p>This domain is for use in ill
浏览 3提问于2022-11-01得票数 0
1回答
所以我有这个html代码
<aside class="sidebar">
<div class="sidebar__logo">....</div>
....
</aside>
我希望当我将鼠标悬停在一边时，sidebar__logo宽度更改为80px，所以我编写了这个scss样式
.sidebar {
width:100px;
&__logo{
width : 40px;
}
&:hover {
width:200px;
浏览 2提问于2020-10-30得票数 0
我很难理解使用BEM的好处--修饰css命名约定。谁能告诉我为什么会这样：
.my-element--checked {
color: green;
}
比这更好吗？
.my-element.checked {
color: green;
}
使用BEM --modifier时，标记显然更加臃肿。
浏览 5提问于2016-02-03得票数 5
我正在使用BEM，请解释如何选择内部的nth子元素.
我试过以下格式，但对我不起作用
<div class="bookearly-container" >
<div class="row bookearly-container__row">
<div class="col-xs-12 col-md-4 bookearly-container__col">
<div class="bookearly-container__discountcontain
浏览 1提问于2018-10-04得票数 4
回答已采纳
1回答
我想要在一个表格上应用名为“模糊”的滤镜(在css中只是悬停)，不包括在那个时刻悬停的td。否则，将从页面加载中应用滤镜模糊。那么，仅通过使用CSS，我如何从表的悬停中排除悬停的td呢？ table td {
filter: blur(1px);
}
td:hover {
filter:blur(0px)
}
浏览 12提问于2019-05-26得票数 2
1回答
那么，假设我有以下代码
<div class="list">
<div class="list__wrapper">
<ul class="list__menu">
<li class="list__item">
<a class="list__link">Link</a>
<p class="list__descri
浏览 2提问于2021-10-25得票数 1
回答已采纳
我正在尝试引用基类来更改基于BEM修饰符的子类。 这在SASS中工作得很好，但我现在正在使用LESS。 这是粗鲁的参考..。https://css-tricks.com/the-sass-ampersand/ 这是不起作用的代码。 .s-body {
@self: &;
...
&__door {
...
&--state-past {
#{@self}__image {
...
}
}
}
&__image {
...
}
}
浏览 20提问于2020-10-23得票数 0
我读到了关于BEM & OBCSS 这里的文章，在某个地方作者提到了以下内容：
解耦选择器不仅将提高可维护性和可伸缩性:它将加快呈现速度。大多数web浏览器都在缓存初级选择器。.alert和.danger将被缓存，而不是.alert.danger！
尤其是浏览器是如何缓存这些规则的，为什么只有特性较低的规则？
我很好奇，因为我不知道浏览器实际上会缓存CSS规则。有人能给出一个关于CSS缓存的合理解释吗？
对于大量的CSS来说，速度值得注意吗？
浏览 0提问于2015-10-05得票数 0
1回答
jQuery、mobile和jQuery UI用它们自己的元素包装您的元素。有时，这些包装器元素有一个“悬停规则”。如果，不管出于什么原因，你不想让悬停规则触发你能做什么？
一个反悬停类，它保持元素在悬停过程中想要的样子。
在元素顶部放置一个div
问题是，如果应用主题，反类就会失败。您可以使用getComputedStyles和Javascript构建类，但出于某种原因，这似乎只保留了所需样式的90%左右。
顶部div的问题是:当鼠标碰到上盖div的角时，仍然会在基础div上触发悬停。
浏览 1提问于2012-10-04得票数 1
回答已采纳
1回答
我是BEM方法论的新手，我有一个针对修饰者的孩子的问题。 假设我有这样的HTML： <div class="block-container">
<div class="block-container__element"></div>
</div> 在block-container中，我添加了修饰符block-container--modifier。 而CSS将是： .block-container {
...
}
.block-container__element {
...
}
.blo
浏览 5提问于2019-05-30得票数 1
回答已采纳
2回答
我正在调试引导选项卡模块和使用Tab模块的应用程序，将其所有的颜色更改都放在li:hover：：color元素中。Firefox并没有将：：the从DOM元素中分离出来，但Chrome却是这样。在常规DOM元素上，例如a，我可以右击打开菜单以选择悬停，也可以单击右侧的引脚选择悬停。
当我右键单击“元素”窗口中的“之前”或尝试在dev tools窗口的右侧选择“悬停”时，我不能。
有办法在伪元素上创建悬停操作吗？
浏览 3提问于2016-03-02得票数 1
回答已采纳
5回答
所以我通过CSS添加了这个带有悬停效果的列表。HTML：
<li><a href="#">Current Period</a>
<ul>
<li><a href="#">2012</a>
<li> a href="#">2011</a> //...you get the point
CSS：
#nav a:hover {
background-color: #fff;
color:
浏览 2提问于2012-09-14得票数 7
回答已采纳
当用户将鼠标悬停在屏幕的右侧时，我使用CSS和HTML来显示和隐藏菜单div。这就是我想要的：
屏幕右侧显示一个箭头。如果用户悬停在箭头或其周围的垂直框上，箭头将消失，并显示带有四个按钮的菜单。如果用户离开垂直框，则四个按钮消失，箭头返回。
我试过很多东西，但似乎什么都没有用。我试着为菜单按钮和以箭头为中心的不可见框设置两个独立的div。这没有工作，因为无敌框使下面的按钮不可点击。我们试着用Z索引来解决这个问题，但没有用。
我现在试着用相同的div中的所有按钮来修复它，但是对于不同的类，这并不适用于我。有人能告诉我哪里出了问题吗？
HTML：
<div id="eas
浏览 2提问于2016-03-16得票数 1
我正在学习如何使用postcss-bem生成bem样式的css文件，但我想知道是否有类似CSS-Modules或Postcss-JS之类的包可以用于执行以下操作：
const ReactComp extends React.Component{
render(){
let styles = './postcss-bem.css'
return <div class={styles.blockname}>something</div>
}
}
我在CSS-Modules和Postcss-JS的文档中找到了这个特性，但是当我尝
浏览 0提问于2016-01-06得票数 1
回答已采纳
2回答
我目前正在为我的HSC (高等教育证书)主修软件设计的工作做一个网站，我遇到了一个奇怪的bug。该网站的当前版本可以在上看到。我的问题是:我有jQuery驱动的下拉菜单。在Chrome中，当您将鼠标悬停在菜单按钮上时，菜单会展开，离开菜单按钮会导致菜单再次缩回。但是，将鼠标从菜单按钮向下移动到新显示的菜单也会导致它缩回，这是一个问题，因为我需要用户能够单击最终会出现在菜单中的链接。似乎孩子不会触发悬停事件。此外，在IE9中，悬停事件根本不会触发，即使悬停在按钮上也是如此。
希望这句话表达得足够清楚。谢谢！YM
浏览 0提问于2012-05-24得票数 0
我创造了这样一个盒子：
现在，我希望有一个hover属性来显示整个div的转换，如下所示：
.plan-box {
transition: all .2s ease-in-out !important;
}
.plan-box :hover{
transform: scale(1.03) !important;
}
但问题是，在div上应用而不是悬停，而是应用于子类div，因此，例如，如果我悬停在4.90上，那部分是动画的，但是我想让整个框动画化。
完整代码片段：
浏览 0提问于2019-06-18得票数 1
回答已采纳
我对主样式表应用了* {-moz-user-select: none;}，因为不可选择的元素比可选择的元素多。然后，我尝试将-moz-user-select: auto;设置为输入，但它不起作用。我还尝试了text和all的值，两者都不起作用。
另外，user-select似乎不能在IE9和Opera10.62中工作，或者我错过了什么？
我尝试在所有浏览器中禁用默认选择，然后对某些元素显式启用它，如输入。
浏览 7提问于2010-10-03得票数 10
回答已采纳
我有两种类型的样式可应用于链接：
显示在页面正文中的链接始终具有蓝色悬停(该部分使用"linkColors“类，如<p class='contactInfo'>)。
标题中出现的链接有不同的背景颜色:当页面加载时，它们将以黄色悬停开始，然后当用户滚动下来(背景消失)时，我们希望像其他链接一样保持蓝色悬停。(本节使用“页眉-链接颜色”类，我们有针对不同颜色的‘未滚动’子类)。我有javascript添加/删除类“未滚动”取决于用户是否滚动。
我的样式表有如下所示：
.linkColors a:hover,
.linkColors a:focus
浏览 2提问于2018-06-28得票数 0
回答已采纳
2回答
当我使用BEM时，我被简单的场景搞糊涂了。示例中有一个基本按钮： .button {
// styles for button
} 及其修饰符，具有更具体的样式： .button.button_run {
// additional styles for this type of button
// i.e. custom width and height
} 前一阵子我意识到我需要button_run的修饰符，让我们把它命名为button_run_pressed .button_run_pressed {
// more styles, i.e. darke
浏览 12提问于2019-02-18得票数 2
回答已采纳
1回答
HTML/CSS：
body {
padding: 50px;
}
ul li:first-child,
ul li:hover {
color: blue;
}
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
-here是一个列表，它的第一个元素默认悬停。当列表的兄弟姐妹被悬停时，我如何消除列表的第一个孩子的悬停效应？
当第一个li以外的子元素被hover编辑以将color of first-child转换为bl
浏览 3提问于2016-01-14得票数 2
回答已采纳
2回答
我有一个更少的混合状态，默认状态和悬停状态。现在，当我在父元素上悬停时，我需要激活混频器中的悬停状态。
减
#icons () {
.settingsIcon() {
background: url("settings.png");
&:hover {
background: url("settings_hover.png");
}
}
}
.SettingsButton {
height: 50px;
width: 200px;
.icon {
#icons >
浏览 5提问于2015-05-07得票数 0
3回答
不管怎么样，有两个选择器组合吗？例如：
#div:hover:not(.class)
编辑：
正如我所写的，我理解这项工作。但是，对于" LI“元素，如何才能达到”悬停“的效果，而当鼠标在LI内部超过某一”DIV“时，就排除了悬停效应呢？
例如：
<li>Hello <div id="#no-hover">Bye</div> </li>
我想给李带来一个悬停效应：
li:hover{ text-color:#CCC; }
但以某种方式排除鼠标超过#无悬停div时的悬停效果。
有什么想法吗？
浏览 3提问于2010-10-17得票数 2
回答已采纳
我有一个父div和两个子div，当我将鼠标悬停在第一个子div上时，我希望将CSS应用于第二个子div。这是render方法的结构。 <div className={classes.parent}>
<div className={classes.child1}></div>
<div className={classes.child2}></div>
</div> 用于在悬停时选择子类的material UI的makeStyles语法是什么？
浏览 10提问于2021-04-21得票数 1
回答已采纳
我有下面的html结构
<div>
text 1
<div>
text 2
<div>
text 3
<div>
text 4
</div>
</div>
</div>
</div>
使用以下jquery
$('div').hover(
function() {
$(this).add
浏览 1提问于2012-03-21得票数 3
回答已采纳
1回答
鼠标对任意一个选择器。
、、、
当"body“或"p”处于悬停状态时，我想创建一个悬停按钮，这意味着它们中的任何一个都会触发悬停事件，您是如何做到的？
我以为是这样的？
$("body")||$("p").mouseenter(function () {....});
浏览 4提问于2013-08-30得票数 0
回答已采纳
我的一位同事在一个他正在策划的项目中大力推动CSS的边界元(块元素修饰符)方法，我只是无法理解是什么使它比我们多年来编写的CSS更好。
他声称“更高的性能”，但我无法想象性能对我们在这个代码库中编写的web应用的类型有什么影响。我们不是在制作Twitter或者Facebook。如果我们使用最多的应用程序每月点击量超过10000次，而且大多数都在1000次以下，我会感到非常惊讶。
他声称“可读性”和“可重用性”，但在我看来，这一点已经做得更好了。我觉得BEM严重破坏了标记，为这些超长的类名增加了几十个字符，从根本上降低了可读性。
他声称“嵌套CSS是一种反模式。”什么是“反模式”甚至意味着，为什
浏览 0提问于2015-04-15得票数 34
回答已采纳
这是我的jsfiddle：
我有两个div，分别表示为红色框和绿色框。我编写了代码，以便当红色框悬停在上面时，绿色的div会变大，反之亦然。
/*make red box bigger when user hovers over green box*/
.greenbox:hover + .redbox{
width:200px;
}
/*make green box bigger when user hovers over red box*/
.redbox:hover + .greenbox{
width:200px;
}
然而，只有当我将鼠标悬停在红色框上时，它才会起作
浏览 0提问于2014-04-21得票数 1
3回答
我有以下HTML结构？
<div id="content">
<h3>some text</h3> <!--Another element having <h3> markup-->
<div class="abc"> <!--This DIV does not have any id-->
<div/>
<h3>some text</h3>
</div>
</div
浏览 1提问于2013-10-29得票数 1
回答已采纳
3回答
我最近听说了BEM方法。
边界元方法的具体用途是什么？
BEM以什么方式使我们的工作更容易？
使用边界元是一个很好的实践吗？
浏览 4提问于2016-04-18得票数 8
回答已采纳
3回答
我熟悉使用css和“悬停”功能，但我对如何使用点击功能很感兴趣。
因此，首先要使用悬停功能，您可以拥有：
#test {
background: black;
height: 100px;
width: 100px;
}
然后当鼠标“悬停”在上方时，我希望它变成白色
#test:hover {
background: white;
height: 100px;
width: 100px;
}
那么，在点击时改变背景的方式也是类似的吗？
谢谢!
詹姆斯
浏览 1提问于2011-11-10得票数 0
1回答
如何在层次分明的css第三里？
、、、、
我很确定我没有得到css中的层次结构来构建它。我似乎找不到一个地方可以真正地向我解释它，以及每个级别是如何工作的。我已经找到了一些这样的展示，但是当你构建它的时候，如果你不知道，至少对我来说，它是很难看到的。在此之前，我从未真正令人惊讶地使用css。如果有人不介意的话，请指出我的错误并解释一下。:)
我只是试图添加第二个下拉列表(下拉到我的下拉列表)，它将水平显示在初始隐藏下拉列表下，当选择正确的一个时，正确的php id将填充到链接中。我包含了PHP，所以如果我把它放错了，也会有人给我指出。
还要补充的是:当我将鼠标悬停在“项目”上时，第二级隐藏下拉链接似乎就在那里，而不是像它应该的那样，悬
浏览 1提问于2012-07-05得票数 1
回答已采纳
1回答
我正在为大型项目创建SCSS，我决定使用BEM方法。我会有很多集装箱。我对BEM和最佳实践有疑问。
我现在的代码是：
.footer {
&__intro {
margin-bottom: 5em;
}
&__menu {
display: flex;
flex-wrap: wrap;
align-items: centre
}
&__menu-item {
&:not(:last-of-type) {
margin-r
浏览 0提问于2022-11-25得票数 0
2回答
我希望文本框的颜色和它的链接在悬停在它上面时倒转。但是，首先，框的背景色反转，只有当光标在文本(链接)上移动时，文本颜色才会反转。
#nav span:hover {
color:white; /* ignored ! */
background-color:#687078;
}
显然，color:white被忽略了(因为a:悬停有优先权？)
如何同时改变两种颜色？
完整的HTML和CSS：
浏览 5提问于2014-02-20得票数 1
回答已采纳
1回答
我试图遵循边界元命名惯例，我不知道如何实现如下:我有一个“工具提示”块，应该使用不同的主题样式。假设我应用了一个“默认”主题。
<div class="tooltip tooltip_theme_default"></div>
工具提示可以放在不同位置的元素周围，这听起来像是我必须在块中添加一个“水平位置”和“垂直位置”修饰符。
<div class="tooltip tooltip_theme_default tooltip_horizontal-position_center tooltip_vertical-position_top&
浏览 1提问于2015-11-23得票数 1
回答已采纳
1回答
我开始练习一些CSS3动画。我这里有一些示例代码：
我想知道，当取消悬停时，我如何为动画指定更长的持续时间。目前，当我悬停时，它似乎需要相同的时间和设置来应用样式来删除它们。我想将其设置为在取消悬停时，背景颜色需要更长的时间(放大到大约2秒)才能淡出到正常状态，但在悬停时仍然需要0.1秒才能淡出。
浏览 1提问于2011-09-19得票数 1
回答已采纳
1回答
我正在做一些自定义的CSS &我正在尝试创建子类别，以便在鼠标悬停在图标和标题上时显示。
当你将鼠标放在图标上时，我能够实现悬停效果，但我花了两天时间，但在标题上没有运气。
下面是代码
/*this doesnt work*/
.cnt-box-side-icon > .caption h2:hover + .caption p {
display: block;
}
/*this works*/
.cnt-box-side-icon i:hover + .caption p {
display: block;
font-size: 14px;
}
浏览 0提问于2020-06-09得票数 0
2回答
构建博客后，最后一部分是创建一个通用选择器，当鼠标悬停在它上面时，它会突出显示黄色的元素。然而，我们需要从行为中排除像body和html这样的元素。我从这个开始
*:hover { background-color:yellow }
如何从通用选择器中排除元素？
浏览 1提问于2015-02-22得票数 3
我甚至不知道如何准确地表达这个问题，所以让我试着把它放入一些代码中：
假设我有一个要动画的div元素，所以我给它两种样式：
#myElement {
width: 100px;
height: 100px;
background: red;
}
#myElement:hover {
width: 150px;
height: 150px;
background: green;
transition: 1s;
}
<div id="myElement"></div>
为什么我应用transition属性的样式很重要？
如
浏览 0提问于2015-10-04得票数 1
回答已采纳
2回答
采取以下结构：
<div class='article article--yellow'>
<div class='article__headline'>...</div>
</div>
<div class='article article--blue'>
<div class='article__headline'>...</div>
</div>
如果我需要使article__headline与--yellow与--bl
浏览 5提问于2016-04-11得票数 5
回答已采纳
我的菜单是这样的：
<section class="top-bar-section">
<ul class="left">
<li class="menu-item menu-item-main-menu menu-item-cine-suntem has-dropdown not-click" id="menu-item-60"><a href="#">TopLevel Menu</a>
<ul class="dropdown&
浏览 1提问于2013-12-02得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
