Question

我试图以纯粹的CSS方式创建一个按钮（我尽量避免使用javascript）我有以下代码

CSS：

.Button a{
text-align:center;
vertical-align:middle;
background-color:transparent;
Height:100%;
color:white;
text-decoration:none;
}
.Button a:hover{
background-color:brown;
cursor:default;
}
.Button a:active{
background-color:gray;
}

现在，我的问题是我希望更改外部元素的背景颜色（类为“Button”的背景颜色）。上面的代码更改了元素的背景颜色而不是封闭的背景颜色。任何想法我怎么能得到这个（不使用JavaScript）？

Answer 1

伪类:hover也可以应用于非锚元素：

div.Button:hover {border:1px solid red}

Answer 2

这是不可能的。 CSS选择器无法选择父元素。他们无法走向DOM。这就是为什么我更喜欢XPath而不是CSS选择器。

Answer 3

我正在回答我自己的问题，希望以后可能偶然发现这个问题的其他人如果遇到同样的问题会受益（因此他们需要像我今天一样抓取网络： -P）。

As，Elusive说，通过CSS选择器选择父元素是 NOT 。

以下代码对我有用：

a.Button {
text-align:center;
vertical-align:middle;
background-color:transparent;
display:block;
Height:100%;
min-width:100px;
color:white;
padding:3px 3px 3px 3px;
text-decoration:none;
}
a.Button:hover{
background-color:brown;
cursor:default;
}
a.Button:active{
background-color:gray;
}

我做了＆lt;一个＆GT;元素显示样式'块'。我能够达到我想要的效果。

悬停在内部<a> Element</a>上时更改外部DIV的属性

3 个答案: