javascript 我想做一个点击和揭示我的4文本垫

我是一个乞丐，我真的想做一个点击或按住光标在每个垫分别和揭示内的文字：这是代码：

`
<!DOCTYPE html>
<html>
<head>
  <title>ProiectIA1</title>
  <link rel="stylesheet" href="style.css"/>
  <script src="script.js" defer></script>
</head>
<body>
  <section>
    <div class="container">
      <div class="box">
        <h2 class="heading--text">PROIECT=IA1</h2>
      </div>
    </div>
  </section>

  <div class="main-container">
    <div class="eu">
      <img src="eu.jpg" alt="eu">
    </div>


    <section class="text-pad-section">
      <div class="container">
        <div class="text-pad1">
          <p>This is text pad 1. You can replace this text with your own content.</p>
        </div>
        <div class="text-pad2">
          <p>This is text pad 2. You can replace this text with your own content.</p>
        </div>
        <div class="text-pad3">
          <p>This is text pad 3. You can replace this text with your own content.</p>
        </div>

        <div class="text-pad4">
          <p>This is text pad 4. You can replace this text with your own content.</p>
        </div>
      

</div>
    </section>
  </div>
</body>
</html>
`

CSS:
`

body{
background-image: url("fundal.jpg");
background-repeat: no-repeat;
background-size: cover;

 height: 100vh; 
  overflow: hidden;
}


html {
  height: 100%; 

section{
    display: flex;
    align-items:center;
    justify-content: left;
    min-height: 98vh;
    padding: 10px;

}
.box{
    display: inline;
    width: 80%;
}
.heading--text{
  display:inline;
  letter-spacing: 15px;
  height: 595px;
width: 37px;
  padding: 15px;
  background-color: #000000;
  color:white;

font-size: 36px;
font-family:"Copperplate";
text-orientation: upright;
writing-mode: vertical-lr;
}

.eu img{
width: 415px;
    height: auto;
    position: absolute;
    top: 51%;
    left: 7%;
    transform: translatey(-50%);
}

.main-container {
  display: flex;

}


.text-pad-section {
  display: flex;
  flex-wrap: wrap;
  margin-top: 40px; 

}

.text-pad1 {
  width: 70%;
  margin-right: 20%; 
  margin-bottom: 20px;
  padding: 115px;
  border: 5px solid #191970;
  border-radius: 20px;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  background-color: rgba(30, 144, 255, 0.4);
position: relative;
left: 600px;
bottom: 785px;

}

.text-pad2 {
  width: 70%;
  margin-right: 20%; 
  margin-bottom: 20px;
  padding: 115px;
  border: 5px solid #191970;
  border-radius: 20px;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  background-color: rgba(30, 144, 255, 0.4); 
position: relative;
left: 1120px;
bottom: 1115px;

}

.text-pad3 {
 width: 70%;
  margin-right: 20%; 
  margin-bottom: 20px;
  padding: 115px;
  border: 5px solid #191970;
  border-radius: 20px;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  background-color: rgba(30, 144, 255, 0.4); 
position: relative;
left: 600px;
bottom: 1110px;}





.text-pad4 {
  width: 70%;
  margin-right: 20%; 
  margin-bottom: 20px;
  padding: 115px;
  border: 5px solid #191970;
  border-radius: 20px;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  background-color: rgba(30, 144, 255, 0.4); 
position: relative;
left: 1120px;
bottom: 1437px;
backface-visibility: hidden;
}

字符串
我需要帮助，因为我有我的头周围2天，我不能弄清楚。

要实现点击并悬停以显示多个文本板的文本功能，我们需要HTML、CSS和JavaScript。
HTML：为每个控件的每个文本板分配一个唯一的ID。

<div class="text-pad" id="text-pad1">
 <p>Content for text pad 1.</p>
</div>
<!-- Repeat with unique IDs for each text pad -->

字符串
CSS：将文本板的初始状态设置为不可见，并定义悬停状态。

.text-pad {
  opacity: 0; /* Hide text initially */
  transition: opacity 0.5s; /* Smooth transition */
}

 .text-pad:hover {
     opacity: 1; /* Reveal text on hover */
    }

型
JavaScript：通过鼠标事件切换可见性，以获得更具交互性的体验。

function toggleVisibility(padId) {
var pad = document.getElementById(padId);
  pad.style.opacity = pad.style.opacity === "0" ? "1" : "0";
}

// Add event listeners for each text pad
document.getElementById('text-pad1').addEventListener('mouseover', () => toggleVisibility('text-pad1'));
document.getElementById('text-pad1').addEventListener('mouseout', () => toggleVisibility('text-pad1'));
// Repeat for each text pad

型

javascript 我想做一个点击和揭示我的4文本垫

1条答案

相关问题

热门标签

最新问答