英文:
Change size of an image appearing by hovering over text css
问题
我有一段文本，当你悬停鼠标在上面（或在移动设备上点击它时），会出现一张图片。我使用了这个stackoverflow答案来使它工作。
我现在正在尝试让图片自动改变大小，以便适应移动设备和计算机上的显示。
a.hovertext1:after {
content: '悬停前出现的文本。';
}
a.hovertext1:hover:after,
a.hovertext1:focus:after {
content: url(https://cdn.discordapp.com/attachments/1074330512925143102/1076897722075971675/5226579-le-drapeau-national-de-la-republique-federative-du-bresil-fond-d-ecran-du-drapeau-bresilien-avec-des-styles-de-degrade-d-ombre-gratuit-vectoriel.jpg);
display: block;
width: 100%; /* 在这里添加宽度属性 */
}
<a name="return1" id="return1"></a>
<a href="#return1" class="hovertext1"></a>
我知道我需要在代码中的某个地方添加width:100%;，但我不知道应该放在哪里。我尝试将其放在a.hovertext1:focus:after{...}块中，但它没有产生任何效果。希望有人能帮助我！
英文:
I have a text on which when you hover (or when you click on it on mobile), a picture appear. I used this stackoverflow answer to make it work.
I'm now trying to make the picture change size automatically, so the picture fit both on mobile and computer.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
a.hovertext1:after {
content: 'Text that appears before I hover.';
}
a.hovertext1:hover:after,
a.hovertext1:focus:after {
content: url(https://cdn.discordapp.com/attachments/1074330512925143102/1076897722075971675/5226579-le-drapeau-national-de-la-republique-federative-du-bresil-fond-d-ecran-du-drapeau-bresilien-avec-des-styles-de-degrade-d-ombre-gratuit-vectoriel.jpg);
display: block;
}
<!-- language: lang-html -->
<a name="return1" id="return1"></a>
<a href="#return1" class="hovertext1"></a>
<!-- end snippet -->
I know I need to add width:100%; somewhere in my code, but I have no idea where. I tried putting it in the a.hovertext1:focus:after{...} block, but it didn't do anything.
Hope someone can help me!
答案1
得分: 0
你想使用伪元素的原因是什么？在鼠标悬停时，可以使用简单的显示属性进行不同的方法。
img {
display: none;
width: 100%;
}
a:hover + img {
display: block;
}
a:hover {
display: none;
}
此外，我建议使用按钮而不是链接。按钮用于影响网站前端的操作；链接用于导航和不影响网站的操作。
英文:
Is there any reason for which you want to use pseudo elements ? There is a different approach using simple display property on hover.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
img {
display: none;
width: 100%;
}
a:hover + img {
display: block;
}
a:hover {
display: none;
}
<!-- language: lang-html -->
<a href="#">Text that appears before I hover</a>
<img class="img" src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" />
<!-- end snippet -->
Also I suggest to use buttons instead of links. Buttons are used for actions that affect the website’s front-end; links are used for navigation and actions that don’t affect the website.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论