Question

让我解释一下：

我有多个宽度不同的物品。当我将它们悬停时，它会显示50％宽的字幕。但是25％的图像上的字幕太小了。

我想在25％的字幕上制作100％宽度和100％高度的字幕。

我可以在我的CSS中指定吗？

图片列表：

.item1 {
    width:100%;
    float:left;
}

.item2 {
    width:25%;
    margin-left:50%;
    margin-right:25%;
    float:left;
}

.item3 {
    width:50%;
    margin-right:25%;
    float:left;
}

.item4 {
    width:25%;
    float:left;
} 

.item5 {
    width:50%;
    margin-left:50%;
    float:left;
}

.item6 {
    width:50%;
    margin-right: 50%;
    float:left;
}

posthover =我的选择器

.posthover {
    width:50%;
    height:auto;
    display:none;

#post:hover .posthover {
    display:block;

必须是这样的：

.posthover (only width 25%) {
     width:100%
     height:100%

}

#post:hover .posthover (only width 25%) {
     width:100%
     height:100%

}

Answer 1

指定您自己的宽度和高度（以像素为单位）

.hover:hover {
    width: 100px;
    height: 100px;
}

Answer 2

因此，您只想将使用25％的项目的高度和宽度设置为100％，对吧？然后宣布。

.item2 {
    width:25%;
    margin-left:50%;
    margin-right:25%;
    float:left;
}
.item2:hover {
    width:100%;
}

Answer 3

你可以使用css规则作为选择器吗？

不，尽管如此，我们无法通过CSS属性进行选择。

以下两种限制选择的方法

使用此HTML

<ul>
  <li class="item1"></li>
  <li class="item2"></li><!-- Select this -->
  <li class="item3"></li>
  <li class="item4"></li><!-- Select this as well -->
  <li class="item5"></li>
  <li class="item6"></li>
</ul>

＃1 - 选择很棒的方式：

浏览器兼容性：Browser support is pretty good (IE 9 +)

如果您需要更广泛的浏览器支持，请使用第二个无聊的示例。

使用nth-child：

li:hover:nth-child(2n):nth-child(-n+4) {
    width:100%;
}

让我们分解部分：

li:hover = on li hover
:nth-child(2n) =选择每一秒
:nth-child(-n+4) =仅从前四个lis中选择

Become an nth master!

很棒的例子

将鼠标悬停在列表项

上

* {
  margin: 0;
  padding: 0;
}
li {
  background: #F00;
  height: 100px;
  transition: all 0.3s;
}
.item1 {
  width: 100%;
}
.item2 {
  width: 25%;
}
.item3 {
  width: 50%;
}
.item4 {
  width: 25%;
}
.item5 {
  width: 50%;
}
.item6 {
  width: 50%;
}
li:hover:nth-child(2n):nth-child(-n+4) {
  width: 100%;
}

<ul>
  <li class="item1"></li>
  <li class="item2"></li><!-- Select this-->
  <li class="item3"></li>
  <li class="item4"></li><!-- Select this as well -->
  <li class="item5"></li>
  <li class="item6"></li>
</ul>

＃2 - 选择无聊的方式

将类选择器与,

一起串起来

.item2:hover,
.item4:hover {
    width:100%;
}

浏览器兼容性：无处不在。

无聊的例子

将鼠标悬停在列表项

上

* {
  margin: 0;
  padding: 0;
}
li {
  background: #F00;
  height: 100px;
  transition: all 0.3s;
}
.item1 {
  width: 100%;
}
.item2 {
  width: 25%;
}
.item3 {
  width: 50%;
}
.item4 {
  width: 25%;
}
.item5 {
  width: 50%;
}
.item6 {
  width: 50%;
}
.item2:hover,
.item4:hover {
  width: 100%;
}

<ul>
  <li class="item1"></li>
  <li class="item2"></li><!-- Select this -->
  <li class="item3"></li>
  <li class="item4"></li><!-- Select this as well -->
  <li class="item5"></li>
  <li class="item6"></li>
</ul>

Answer 4

不，甚至没有什么比使用CSS规则作为选择器更像。这同样适用于您在问题体中实际要求的内容，即在选择器中使用属性的值（以某种方式）。 CSS样式表是一组彼此独立的规则;它们只是在它们全部（潜在地）促成元素呈现方式的意义上相互作用。

因此，您需要分析样式表的设置，例如，某事物的宽度设置为25％，然后在标识的规则中使用选择器来设置其他规则。

你能用css规则作为选择器吗？

4 个答案: