我已经制作了一些代码来制作一个可滚动的段落。我想让弹出窗口<div>之外的所有内容都不可见。我可以只使用HTML和CSS吗？
<div style="position:relative;">
<div id="popup" style=" overflow: hidden; position: relative; width: 100px; height: 100px;">This must be visible. And everything out of this div, must be hidden</div>
<div style="position:absolute;left:-100px;top:-50px;">the tooltip thing</div>
</div>
<p>These must be hidden.</p>
<p>These must be hidden.</p>
<p> And These too</p>
<style>
div.po
{
display: none;
}
div.p
{
display: block;
}
button:hover + div.p {
display: none;
}
button:hover + div.po {
display:block;
}
</style>
<button>Show</button>
<div class="p">Other contents</div>
<div class="po">Popup</div>
css按钮：悬停只是改变一种元素样式。 当按下按钮时，我想制作两个＆＃39; div.po - style＆＃39;进入显示：块 和＆＃39; div.p - style＆＃39;显示：无。
答案 0 :(得分：2)
最重要的部分是编辑部分。阅读它。
如果您不使用内联CSS，则可以为隐藏项目分配display: none的类，或者隐藏父类的所有子项，并在下面添加一个特殊情况用于弹出窗口。默认情况下，隐藏父项中的所有项。请记住，CSS是 Cascading 样式表，因此弹出窗口优先。
.parent * {
display: none;
}
.parent popup {
display: initial;
/* Or if you want block, like you said in your comment: */
display: block;
}
但如果它已经是一个块初始化将正常工作。
编辑：根据以下评论（您应该阅读它们，它们对此有很大帮助）这就是我所做的。
.tooltip-content {
display: none;
}
.show-tooltip:hover + .tooltip-content {
display: block;
}
.show-tooltip:hover ~ * {
display: none;
}<body>
<div class="tooltip-section">
<button class="show-tooltip">Show Tooltip</button>
<p class="tooltip-content">Tooltip Content</p>
<p>Other Content</p>
</div>
</body>
这是同样的事情，但是在JSFiddle。
基本上，它默认隐藏tooltip-content类。当兄弟show-tooltip按钮悬停时，它会隐藏所有未分配的兄弟姐妹并显示相邻的 tooltip-content兄弟。这不一定是段落，但这应该可以帮助您开始使用所需的内容。
希望它有所帮助！
答案 1 :(得分：2)
从我在你的帖子和评论中看到的内容看起来你试图通过使该段落可滚动而同时隐藏页面上的所有其他内容来使特定段落像弹出窗口一样。
看起来您使用in-line样式而不是使用CSS样式表。我也没有看到任何关于JavaScript的提及。
<强>答案：
所以，回答你的问题，如果你能用HTML和CSS完成所有这些，我相信答案是否定的，因为你不能直接从另一个html元素动态影响一个html元素。您可以使用继承作为一种棘手的解决方法，但如果您将其用于工作，它很可能会很混乱，并且在现代Web开发中没有多大的位置。
您还提到了＆＃34; hover＆＃34;在您的一条评论中，您可能熟悉Psudeo选择器，但您不能使用具有内联样式的Psudeo-Selectors。此外，Psudeo-selectors将更改特定元素和可能的子元素的显示html，但不会更改页面上的所有元素，除非该特定元素恰好是顶级元素。
为了给你一个解决方案，我建议使用HTML5，CSS和JavaScript来做所谓的＆＃34; Burn and Re-build。＆＃34;它是Single-Page Applications中常见的结构，用户可以浏览网站上的不同页面，但实际上内容全部被隐藏，只显示特定部分。
有很多方法可以做到这一点，但大多数人一开始会使用JavaScript EventListeners，随着他们越来越有经验，他们将学会使用其他工具，如jQuery或Angular / React来更新html页面（又名DOM） ）。任何这些建议都会为您提供实现目标所需的工具，但我认为纯HTML和内联样式无法实现。
<强> 解决方案 ：
获得所需内容的方法之一是使用HTML5，CSS和JavaScript EventListeners。首先，您需要在CSS中编写2个不同的样式类：＆＃39; .show＆＃39;和。＆＃39;隐藏＆＃39;
.show {
visibility:visible;
}
.hide {
visibility:hidden;
}
请注意，我使用了可见性而不是显示。这是因为显示用于布局和流程，而可见性处理是否可以看到元素。此外，如果你使用像display：initial;或显示：块;你将搞乱你的其他类所具有的任何格式，它将打破表和列表。当您将其中一个类应用于其中一个HTML标记时，它会隐藏或显示该标记及其所有子标记。
另请注意，您实际上不需要将类更改为.show，只需删除.hide类，该元素将恢复为默认可见性。根据我的经验，最好使用.hide 和 .show，因为它＆＃39;更迫切。另外，我可能想要更改一些先前隐藏的元素，而不是隐藏或显示的元素。我仍然建议使用可见性而不是显示，因为如果使用显示器，您可能仍会弄乱你的位置。
接下来，您需要编写一个函数，只要用户点击您的按钮就会调用该函数。当用户点击按钮时，您的功能需要执行以下操作：
一旦你编写了这个函数，你需要将EventListener附加到你的按钮，每次点击按钮时都会调用这个函数！
这是我为您编写和测试的代码。我希望它有所帮助！
JavaScript，CSS和HTML5代码：
/* Commented code is running on the bottom. This is the un commented version for easier reading.
'use strict'
let hidden = false
let showPopup = function(){
let main = document.getElementById('main').children
if (!hidden){
for(let i=0; i< main.length; i++){
if(main[i].id !== "popup"){
main[i].classList.remove('show')
main[i].classList.add('hide')
}else{
main[i].classList.add('popup-para')
}
}
hidden = !hidden
}else{
for(let i=0; i< main.length; i++){
main[i].classList.remove('hide')
main[i].classList.remove('popup-para')
main[i].classList.add('show')
}
hidden = !hidden
}
console.log( document.getElementById('test-para').classList )
}
document.getElementById('popup-button').onclick = showPopup
*/
'use strict'
// Tracks if the popup is active or not.
let hidden = false
// This is the function that will be called each time the user clicks on your button.
let showPopup = function() {
// Finds the "main" tag by it's id and then gets all of it's child elements
// Then stores those child elements into an array called main.
let main = document.getElementById('main').children
if (!hidden) { // If not hidden, hide everything and show popup.
for (let i = 0; i < main.length; i++) {
// This part loops over each child element and checks it's id.
// If it's id does not equal "popup" then hide it.
if (main[i].id !== "popup") {
main[i].classList.remove('show')
main[i].classList.add('hide')
} else {
main[i].classList.add('popup-para') // Will give the specific popup the popup class.
}
}
// This could also be written as hidden = true.
// This allows the function to move to the else block the next time it's called.
hidden = !hidden
} else { // This is the opposite of the above if statement. It will un-hide everything and remove the popup class.
for (let i = 0; i < main.length; i++) {
main[i].classList.remove('hide')
main[i].classList.remove('popup-para')
main[i].classList.add('show')
}
hidden = !hidden // Sets hidden = false
}
// This is to show the other classes are not accidentally overwritten.
// Checkout number 3 in the console.
console.log(document.getElementById('test-para').classList)
}
// This tells the event what function to call when the event is triggered.
// This has to be written below the function it is calling due to 'hoisting'.
document.getElementById('popup-button').onclick = showPopup.show {
visibility: visible;
}
.hide {
visibility: hidden;
}
.class-1 {
color: purple;
}
.c1 {
height: 10%;
width: 60%;
}
.popup-para {
max-height: 10em;
font-family: Verdana;
font-size: 32px;
overflow: scroll;
color: darkblue;
}<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<main id="main">
<h1> This is the main page content </h1>
<ol>
<li> Here's a list item. </li>
<li> Here's anotha! </li>
</ol>
<p> Your button is just after this paragraph </p>
<div id="popup">
<button id="popup-button" class="c1 c2 c3 c4">Click to hide or show all other sections</button>
<p> This is the paragarah that you want to look like it has popped up. I also have it changing it's text color let it stand out more! Also notice that it has kept the same position on the page and didn't jump up to the top. This is because we changed
the visibility of all the other elements as opposed to the display! They still maintain their positioning and flow!
<p> This paragrah shows up too because it is inside the popup div! Trying to fill space here, too lazy to get the Ipsum. Let's breakdown the JavaScript document object a bit. When we say document.getElementById('main') we are saying, "Hey, go look
at the entire HTML5 file, document, and get me each element that has an id of 'main', .getElementById('main'), then store those children into the variable 'main' as an array!" Since each id is unique, there can only be one thing that is returned
when we call .getElementById(). If you happen to have two elements in your HTML that have the same id, then only the first one will get returned. What is returned is actually called an Element object. Since it is an object, it also has properties!
One of those properties is called children and since an element can possibly have multiple children, it will return an array! Each item in that array is another Element object that references that specific element in the HTML file! Should have
got the lorem... </p>
</div>
<p id="test-para" class="class-1 class-2 class-3">This color stays purple because of precedence! </p>
<p> This doesn't though..</p>
<h1> "DON'T FORGET ABOUT ME!!"</h1>
<ul>
<li> These list elements are still in position</li>
<li> tada</li>
</ul>
</main>
</body>
<script src="index.js"></script>
</html>
答案 2 :(得分：0)
HTML： 主体。
</div>
<div id="popup">
<a href="index.html">
Close
</a>
This is pop-up text
</div>
</span>
</div>
CSS：
#popup_bg
{
display:none;
height:100vh;
width:100vh;
position: fixed;
left:0;
right:0;
}
#popup_bg
{
display:none;
height:10vh;
width:10vh;
position: fixed;
left:45%;
right:45%;
}
#box: checked
#popup_bg
{
display:block;
}
#box: checked
#popup
{
display:block;
}
已经很久了，因为我问了这个问题。 但没有正确的答案。 但现在我知道我想要的一切。这是代码。
答案 3 :(得分：-2)
如果您想要隐藏外线内容，那么您可以使用主overflow中的<div>属性，如下所示：
<div style="position:relative; overflow:hidden;">
<div id="popup" style="overflow: scroll; position: relative; width: 100px; height: 100px;">This must be visible, and everything out of this div must be hidden.</div>
<div style="position:absolute;left:-100px;top:-50px;">The tooltip thing</div>
</div>
<p>These must be hidden.</p>
<p>These must be hidden.</p>
<p> And These too</p>