CSS 选择器 img:hover:after 未应用 Demo

问题描述

我知道我可以使用 reindex API，所以我自己尝试了一下，但它不起作用：

.img-shadow img:hover:after {
    -webkit-Box-shadow: inset 10px 10px 10px 0px rgba(0,0.75);
    -moz-Box-shadow: inset 10px 10px 10px 0px rgba(0,0.75);
    Box-shadow: inset 10px 10px 10px 0px rgba(0,0.75);
}

<div class="wpb_single_image wpb_content_element vc_align_left img-shadow">
    <figure class="wpb_wrapper vc_figure">
        <a href="#"><img width="100%" height="auto" src="http://dev.watmar.com.au/wp-content/uploads/2020/10/Power_generation.jpg"></a>
    </figure>
</div>

解决方法

你到底想在这里做什么？如果您的目标是使用伪元素，那么您可以使用它在 import requests import pandas as pd from bs4 import BeautifulSoup as bs def add_rows(table,region,data_block): for i in range(0,len(data_block),3): row = [table,data_block[i]['INDICATEUR'].split('_')[-1]] for y in range(3): row.extend([data_block[i-y+2]['DATA2014']]) final.append(row) url = 'http://rgphentableaux.hcp.ma/Default1' headers= {'User-Agent': 'Mozilla/5.0','Referer': url} tables = ['ens','urb','rur'] final = [] with requests.Session() as s: s.headers = headers soup = bs(s.get(url).content,'lxml') regions = {i.text.strip():i['value'].strip() for i in soup.select('#REGIONSLIST option')} for k,v in regions.items(): params = (('type','Region'),('CGEO',v),('them','5')) r = s.get(f'{url}/getDATA/',params=params) data = r.json() block = len(data)//3 for n in range(0,len(data),block): table = tables[n//block] add_rows(table,k,data[n:n+block]) df = pd.DataFrame(final,columns = ['Table','Region','Language','Masc','Fem','Ens']) print(df) 和 ::before 前后添加内容。伪类用单冒号，伪元素用双冒号。如果在上面你的目标是添加阴影，你可以直接添加它，你不需要为此使用任何伪元素。使用 ::after 您看不到阴影，因为它是不可见的内侧，删除 inset 以查看图像外部的阴影。

,

你好

亲爱的如果你使用 :after 伪选择器，你应该使用

content: "";
position: absolute;
width: 100%;
height: 100%;

及其父标签必须使用

position: relative;

但在您选择的标签中是不可能的

position: relative;

在这种情况下如果你想使用 box-shadow: inset 0px 0px 10px 10px rgba(0,0.75);

你必须在元素内部使用padding，否则你看不到box-shadow。

有关更多帮助，您可以访问此

Demo

我可以尽力为您提供全力支持。

.img-shadow img {
    transition: all 0.5s;
    padding: 20px;
}
.img-shadow img:hover {
    -webkit-box-shadow: inset 0px 0px 10px 10px rgba(0,0.75);
    -moz-box-shadow: inset 0px 0px 10px 10px rgba(0,0.75);
    box-shadow: inset 0px 0px 10px 10px rgba(0,0.75);
}

<div class="wpb_single_image wpb_content_element vc_align_left img-shadow">
    <figure class="wpb_wrapper vc_figure">
        <a href="#"><img width="100%" height="auto" src="http://dev.watmar.com.au/wp-content/uploads/2020/10/Power_generation.jpg"></a>
    </figure>
</div>