如何仅制作CSS弹出窗口或工具提示

我已经制作了一些代码以制作段落可滚动。我想在弹出式<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>

这是弹出代码（NoScript）：

<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按钮：悬停只是更改一个元素样式。按下按钮时，我想将两个"div.po-样式"放入显示：块和"div.p-样式"显示：无。

从我在您的帖子中阅读的内容和评论中，您似乎正在尝试获得一个通过制作该段的滚动，同时还隐藏了页面上的其他所有内容，可以像弹出窗口一样表现出弹出式段落。

看起来您正在使用在线样式，而不是使用CSS样式表。我也看不到JavaScript。

答案：

因此，要回答您的问题，您是否只能使用HTML和CSS来完成所有操作，我相信答案是否定的，因为您不能直接从另一个HTML元素直接动态地影响一个HTML元素。您也许可以将继承用作一个棘手的解决方法，但是如果您让它工作，那么它很可能会凌乱，并且在现代网络开发中没有太多位置。

您还提到了其中一个评论中的"悬停"，因此您可能熟悉PSUDEO-SECECTORS，但您不能将PSUDEO-SELECTORS与内联样式使用。此外，psudeo-elector将更改特定元素的显示的HTML，可能是孩子的，但不是页面上的所有元素，除非该特定元素恰好是顶级元素。

为了给您一个解决方案，我建议使用HTML5，CSS和JavaScript执行所谓的"烧伤和重建"。这是在单页应用程序中发现的一个常见结构，用户可以在网站上的不同页面中导航，但实际上全部隐藏了内容，然后仅显示特定的部分。

有很多方法可以做到这一点，但是大多数人一开始会使用JavaScript EventListeners，并且随着他们获得更多的经验，他们将学会使用其他工具，例如JQuery或Angular/React来更新HTML页面（又称DOM）。这些建议中的任何一个都会为您提供实现目标所需的工具，但是我认为在纯HTML含有内联样式中不可能。

解决方案 ：

获得您想要的东西的方法之一就是使用HTML5，CSS和JavaScript EventListeners。首先，您需要在CSS中写2个不同的样式课程：'.show'和.'hide'。

.show {
   visibility:visible;
}
.hide {
   visibility:hidden;
}

请注意，我使用的是可见性而不是显示。这是因为显示用于布局和流程，而可见性处理是否可以看到元素。另外，如果您使用诸如display：jirtial的内容；或显示：块；您会弄乱其他课程的任何格式，并且会打破表格和列表。当您将这些类之一应用于您的HTML标签之一时，它也将与所有孩子一起隐藏或显示该标签。
还要注意，您实际上不需要将类更改为。显示，您只需要删除.HIDE类，该元素就会恢复为默认可见性。根据我的经验，最好使用.HIDE 和。显示，因为它更重要。此外，我可能想更改有关以前隐藏的元素与我既没有隐藏也没有显示的元素不同的内容。我仍然建议使用可见性而不是显示，因为如果您使用显示，您仍然可能会弄乱定位。

接下来，您需要编写一个函数，该功能可以随时单击您的按钮。当用户单击按钮时，您的功能将需要做几件事：

获取您要隐藏或显示的所有元素的集合。
遍历该系列，并适当地隐藏/显示正确的元素。

拥有写入功能后，您需要将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>

其中最重要的部分是编辑部分。阅读它。

如果您不使用内联CSS，则可以将隐藏的项目分配给带有display: none的类或使父母的所有孩子隐藏，并在下面添加一个特殊情况。默认情况下将父母隐藏的所有项目。请记住，CSS是级联的样式表，因此弹出式优先。

.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兄弟姐妹。这不一定是段落，但这应该使您从需要的东西开始。

希望它有帮助！

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;
   }

自从我问这个问题以来已经很长时间了。但是没有正确的答案。但是现在我知道了我想要的一切。这是代码。

相关内容

最新更新

热门标签：