如何为伪元素制作悬停效果？

发布于 2024-12-27 07:01:28 字数 551 浏览 1 评论 0原文

我有一个这样的设置：

<div id="button">Button</div>

对于CSS：

#button {
    color: #fff;
    display: block;
    height: 25px;
    margin: 0 10px;
    padding: 10px;
    text-indent: 20px;
    width: 12%;
}

#button:before {
    background-color: blue;
    content: "";
    display: block;
    height: 25px;
    width: 25px;
}

有没有办法给伪元素一个悬停效果，例如 #button:before:hover {...} 并且是否也可以得到悬停的伪元素以响应另一个悬停的元素，如下所示：#button:hover #button:before {...}？仅 CSS 就可以了，而且 jQuery 也可以。

原文

I have a this setup:

<div id="button">Button</div>

and this for CSS:

#button {
    color: #fff;
    display: block;
    height: 25px;
    margin: 0 10px;
    padding: 10px;
    text-indent: 20px;
    width: 12%;
}

#button:before {
    background-color: blue;
    content: "";
    display: block;
    height: 25px;
    width: 25px;
}

Is there a way to give the pseudo element a hover effect such as #button:before:hover {...} and is it also possible to get the pseudo element to hover in response to another element being hovered like so: #button:hover #button:before {...}? CSS only would be nice, but also jQuery is fine too.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

你怎么敢 2025-01-03 07:01:28

您可以根据父元素的悬停来更改伪元素：

JSFiddle DEMO

#button:before {
    background-color: blue;
    content: "";
    display: block;
    height: 25px;
    width: 25px;
}

#button:hover:before {
    background-color: red;
}

#button {    display: block;
    height: 25px;
    margin: 0 10px;
    padding: 10px;
    text-indent: 20px;
    width: 12%;}

#button:before { background-color: blue;
    content: "";
    display: block;
    height: 25px;
    width: 25px;}

#button:hover:before { background-color: red;}

<div id="button">Button</div>

You can change the pseudo-element based on hover of the parent:

JSFiddle DEMO

#button:before {
    background-color: blue;
    content: "";
    display: block;
    height: 25px;
    width: 25px;
}

#button:hover:before {
    background-color: red;
}

#button {    display: block;
    height: 25px;
    margin: 0 10px;
    padding: 10px;
    text-indent: 20px;
    width: 12%;}

#button:before { background-color: blue;
    content: "";
    display: block;
    height: 25px;
    width: 25px;}

#button:hover:before { background-color: red;}

<div id="button">Button</div>

回复收藏 0 原文

埋情葬爱 2025-01-03 07:01:28

澄清一下，您不能将 :hover 赋予伪元素。截至 2018 年，CSS 中还没有 ::after:hover 这样的东西。

回复收藏 0 原文

汐鸠 2025-01-03 07:01:28

#button:hover:before 将更改伪元素以响应按钮悬停。但是，如果您只想对伪元素执行任何重要操作，那么最好将实际元素放入 HTML 中。伪元素相当有限。

虽然 CSS 不允许您根据后面的元素设置元素样式，但通常可以通过将 :hover 放在父节点上来装备具有相同基本效果的东西，即：

<div id="overbutton">
    <div id="buttonbefore"></div>
    <div id="button"></div>
</div>

#overbutton {
    margin-top: 25px;
    position: relative;
}

#buttonbefore {
    position: absolute;
    background-color: blue;
    width: 25px;
    height: 25px;
    top: -25px;
}

#overbutton:hover #buttonbefore {
    // set styles that should apply to buttonbefore on button hover
}

#overbutton:hover #buttonbefore:hover {
    // unset styles that should apply on button hover
    // set styles that should apply to buttonbefore on buttonbefore hover
}

#button:hover:before will change the pseudo-element in response to the button being hovered. If you want to do anything nontrivial to the pseudo-element only, however, you'd be better off putting an actual element into your HTML. Pseudo-elements are rather limited.

While CSS won't let you style elements based on elements that come after them, it is usually possible to rig something with the same basic effect by putting :hover on a parent node, i.e.:

<div id="overbutton">
    <div id="buttonbefore"></div>
    <div id="button"></div>
</div>

#overbutton {
    margin-top: 25px;
    position: relative;
}

#buttonbefore {
    position: absolute;
    background-color: blue;
    width: 25px;
    height: 25px;
    top: -25px;
}

#overbutton:hover #buttonbefore {
    // set styles that should apply to buttonbefore on button hover
}

#overbutton:hover #buttonbefore:hover {
    // unset styles that should apply on button hover
    // set styles that should apply to buttonbefore on buttonbefore hover
}

回复收藏 0 原文

夜司空 2025-01-03 07:01:28

如果只是出于设计目的，我认为最好在矩形框的两侧创建伪元素并保持 HTML 尽可能简单：

HTML：

 <body>
    <div class="tabStyle">Rectangle</div>
    </body>

CSS：

 .tabStyle {
        border-style:solid;
        border-color: #D8D8D8;
        background : #D8D8D8;
        width:200px;
        height:93px;
        color: #000;
        position: relative;
        top: 10px;
        left: 49px;
        text-align:center;
    }
    .tabStyle:hover {
        background : #000;
        border-color: #000;
    }
    .tabStyle:hover::before {
        border-color: transparent #000 #000 transparent;
        border-style: solid;
        border-width: 0px 0px 100px 50px;
    }
    .tabStyle:hover::after {
        border-color: transparent transparent #000 #000;
        border-style: solid;
        border-width: 0px 50px 100px 0px;
    }
    .tabStyle::after {
        border-color: transparent transparent #D8D8D8 #D8D8D8;
        border-style: solid;
        border-width: 0px 50px 100px 0px;
        position: absolute;
        top: -4px;
        left:101%;
        content:"";
    }
    .tabStyle::before {
        border-color: transparent #D8D8D8 #D8D8D8 transparent;
        border-style: solid;
        border-width: 0px 0px 100px 50px;
        position: absolute;
        top: -4px;
        right: 101%;
        content:"";
    }

我修改了 CSS，结果如下所示：

http://jsfiddle.net/a3ehz5vu/

If its just for design purposes I think its better to create Pseudo-Elements on either side of the Rectangle Box and to keep the HTML as simple as possible:

HTML:

 <body>
    <div class="tabStyle">Rectangle</div>
    </body>

CSS:

 .tabStyle {
        border-style:solid;
        border-color: #D8D8D8;
        background : #D8D8D8;
        width:200px;
        height:93px;
        color: #000;
        position: relative;
        top: 10px;
        left: 49px;
        text-align:center;
    }
    .tabStyle:hover {
        background : #000;
        border-color: #000;
    }
    .tabStyle:hover::before {
        border-color: transparent #000 #000 transparent;
        border-style: solid;
        border-width: 0px 0px 100px 50px;
    }
    .tabStyle:hover::after {
        border-color: transparent transparent #000 #000;
        border-style: solid;
        border-width: 0px 50px 100px 0px;
    }
    .tabStyle::after {
        border-color: transparent transparent #D8D8D8 #D8D8D8;
        border-style: solid;
        border-width: 0px 50px 100px 0px;
        position: absolute;
        top: -4px;
        left:101%;
        content:"";
    }
    .tabStyle::before {
        border-color: transparent #D8D8D8 #D8D8D8 transparent;
        border-style: solid;
        border-width: 0px 0px 100px 50px;
        position: absolute;
        top: -4px;
        right: 101%;
        content:"";
    }

I've modified the CSS and the result can be seen below:

http://jsfiddle.net/a3ehz5vu/

回复收藏 0 原文

~没有更多了~