Question

我有8张图像，每个图像都有描述，我希望当我将鼠标悬停在图像中的每个按钮时，描述将显示在图像上方。老实说，我已经花了几天时间解决这些问题，尝试自己解决，但仍然无法解决。任何帮助将不胜感激。

PS：这里我只有2个按钮，因为我还没有完成设计。并且，请不要对图像的重复描述感到困惑。

.section-feature {

    padding-top: 0;
}
.feature-showcase {
    list-style: none;
    width: 100%;
}
.feature-showcase li {
    display: block;
    float: left;
    width: 25%;
}
.features-photo {
    width: 100%;
    margin:0;
    overflow: hidden;
    background-color: #000;

}
.features-photo img {
	position: relative;
	opacity:0.7;
    width: 100%;
    height: auto;
    transform: scale(1.15);
    transition: transform 0.5s,  opacity 0.5s;
    
}
.features-photo img:hover {
    opacity: 1;
    transform: scale(1.04)
}
.btn,
.btn1{
    position: absolute;
    top: 40%;
    left: 8%;
    transform: translate(200%,3200%);
    background-color: rgba(0, 0, 0, 0.33);
    color: #ffffff;
    z-index: 1;
    font-size: 16px;
    padding: 12px 24px ;
	outline: none;
    border: none;
    cursor: pointer;
    border-radius: 15px;
    text-align: center;
}
.btn1 {
    position: absolute;
    top: 27%;
    left: 16.5%;
	transform: translate(500%, 3400%);

}


 .btn:hover {
    background-color: black;
	opacity: 1;
}
 .btn1:hover {
    background-color: black;
	
}


 .long-copy {
	 z-index: 1;
	 display: none;
	background-color: rgba(186, 168, 172, 0.21); 
	color: #fcf5f5;
	 letter-spacing: 1px;
	line-height: 145%;
	 float: left;

}
  .btn:hover ~ figcaption{
		display: block;  

            
}

    <section class="section-feature">
	
		<button class="btn">Info</button>
		
    <ul class="feature-showcase">
        <li>
        <figure class="features-photo">
            <img src="resources/images/Real%20Time%2001.jpg" alt="real-time">
					<figcaption class="long-copy">Our Telematics applied to motor vehicles can allow remote, real-time (or retrospective) monitoring of a vehicle's locations and movements by the vehicle owner or other parties. Vehicle telematics units today can not only provide accurate, continuous vehicle speed and location data but also straight-line acceleration, angular acceleration and deceleration data. This enables a far more complete understanding of vehicle usage which can provide many benefits; not only to the vehicle owner but also to other road users.</figcaption>  
            </figure>
        </li>

				
 <li>
		
<figure class="features-photo">
			
<button class="btn1">Info</button>
				
<img src="resources/images/Overspeeding.jpg" alt="Overspeeding">
			     <figcaption class="long-copy">Our Telematics applied to motor vehicles can allow remote, real-time (or retrospective) monitoring of a vehicle's locations and movements by the vehicle owner or other parties. Vehicle telematics units today can not only provide accurate, continuous vehicle speed and location data but also straight-line acceleration, angular acceleration and deceleration data. This enables a far more complete understanding of vehicle usage which can provide many benefits; not only to the vehicle owner but also to other road users.</figcaption>
            </figure>      
        </li>
        
        
 <li>
 <figure class="features-photo">
 <img src="resources/images/Driver%20Identification%2001.jpg" alt="Driver Identification">
			   <figcaption class="long-copy">Our Telematics applied to motor vehicles can allow remote, real-time (or retrospective) monitoring of a vehicle's locations and movements by the vehicle owner or other parties. Vehicle telematics units today can not only provide accurate, continuous vehicle speed and location data but also straight-line acceleration, angular acceleration and deceleration data. This enables a far more complete understanding of vehicle usage which can provide many benefits; not only to the vehicle owner but also to other road users.</figcaption>
       </figure>         
        </li>
        
        
 <li>
<figure class="features-photo">
 <img src="resources/images/Fuel%20Management.jpg" alt="Fuel Management">
			          <figcaption class="long-copy">Our Telematics applied to motor vehicles can allow remote, real-time (or retrospective) monitoring of a vehicle's locations and movements by the vehicle owner or other parties. Vehicle telematics units today can not only provide accurate, continuous vehicle speed and location data but also straight-line acceleration, angular acceleration and deceleration data. This enables a far more complete understanding of vehicle usage which can provide many benefits; not only to the vehicle owner but also to other road users.</figcaption>
            </figure>
        </li>
  
  <li>
 <figure class="features-photo">
   <img src="resources/images/Maintenance.jpg" alt="Maintenance">
			      <figcaption class="long-copy">Our Telematics applied to motor vehicles can allow remote, real-time (or retrospective) monitoring of a vehicle's locations and movements by the vehicle owner or other parties. Vehicle telematics units today can not only provide accurate, continuous vehicle speed and location data but also straight-line acceleration, angular acceleration and deceleration data. This enables a far more complete understanding of vehicle usage which can provide many benefits; not only to the vehicle owner but also to other road users.</figcaption>
            </figure>        
        </li>
        
  <li>
  <figure class="features-photo">
  <img src="resources/images/Accident%20Data.jpg" alt="Accident">
			                  <figcaption class="long-copy">Our Telematics applied to motor vehicles can allow remote, real-time (or retrospective) monitoring of a vehicle's locations and movements by the vehicle owner or other parties. Vehicle telematics units today can not only provide accurate, continuous vehicle speed and location data but also straight-line acceleration, angular acceleration and deceleration data. This enables a far more complete understanding of vehicle usage which can provide many benefits; not only to the vehicle owner but also to other road users.</figcaption>
            </figure>  
        </li>
                 
<li>
<figure class="features-photo">
<img src="resources/images/Geofencing%20.jpg" alt="Geofencing">
			 <figcaption class="long-copy">Our Telematics applied to motor vehicles can allow remote, real-time (or retrospective) monitoring of a vehicle's locations and movements by the vehicle owner or other parties. Vehicle telematics units today can not only provide accurate, continuous vehicle speed and location data but also straight-line acceleration, angular acceleration and deceleration data. This enables a far more complete understanding of vehicle usage which can provide many benefits; not only to the vehicle owner but also to other road users.</figcaption>
            </figure>
        </li>
                 
                 
  <li>
  <figure class="features-photo">
 <img src="resources/images/Journey%20Management.jpg" alt="Journey Management">
			      <figcaption class="long-copy">Our Telematics applied to motor vehicles can allow remote, real-time (or retrospective) monitoring of a vehicle's locations and movements by the vehicle owner or other parties. Vehicle telematics units today can not only provide accurate, continuous vehicle speed and location data but also straight-line acceleration, angular acceleration and deceleration data. This enables a far more complete understanding of vehicle usage which can provide many benefits; not only to the vehicle owner but also to other road users.</figcaption>
            </figure>           
        </li>
        </ul>
    
    </section>

Answer 1

我试图对您的代码做些什么，但我决定从头开始。

这里有两个例子：

纯CSS和HTML（但对于大描述来说看起来并不好）
通过JS（使用模式弹出窗口作为解决方案）

CSS和HTML

* {
  font-size: 0;
}

.container {
  display: inline-block;
  position: relative;
  width: 25%;
}

.image {
  display: inline-block;
  width: 100%;
  height: auto;
}

.btn {
  position: absolute;
  bottom: 5%;
  left: 20%;
  transform: translate(-50%, -50%);
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 8px 16px;
  z-index: 100;
}

.btn:hover {
  background-color: #3e8e41;
  box-shadow: 1px 1px 1px #d3d3d3;
}

.btn:hover+.description {
  opacity: 1;
}

.description {
  opacity: 0;
  color: black;
  font-size: 15px;
  position: absolute;
  top: 20%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

<div class="container">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg" alt="Avatar" class="image">
  <div class="btn">info</div>
  <div class="description">Some description</div>
</div>
<div class="container">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg" alt="Avatar" class="image">
  <div class="btn">info</div>
  <div class="description">Some description</div>
</div>
<div class="container">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg" alt="Avatar" class="image">
  <div class="btn">info</div>
  <div class="description">Some description</div>
</div>
<div class="container">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg" alt="Avatar" class="image">
  <div class="btn">info</div>
  <div class="description">Some description</div>
</div>
<div class="container">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg" alt="Avatar" class="image">
  <div class="btn">info</div>
  <div class="description">Some description</div>
</div>
<div class="container">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg" alt="Avatar" class="image">
  <div class="btn">info</div>
  <div class="description">Some description</div>
</div>
<div class="container">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg" alt="Avatar" class="image">
  <div class="btn">info</div>
  <div class="description">Some description</div>
</div>
<div class="container">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg" alt="Avatar" class="image">
  <div class="btn">info</div>
  <div class="description">Some description</div>
</div>

JS解决方案（带有模式弹出窗口）

我认为这是更方便的渲染任意数量的卡片的方法。您只需要在一个地方更改代码，它就随处更改。当然，在React中它会更强大，但是这种方法也没有纯CSS和HTML解决方案那么糟糕

var data = [{
    id: "1",
    src: "https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg",
    description: "Relevant information and data that can be provided from these GPS systems include the location of the trailer or truck at various times. Depending on how often the information is captured (15 minutes, 30 seconds or 1 second intervals, for example), it can also tell the speed a vehicle was going at a certain point in time. The White Light OPAL iVMS tracks data every second, which can help immensely with second by second accident reconstruction, to know the location and speed of the vehicle."
  },
  {
    id: "2",
    src: "https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg",
    description: "Relevant information and data that can be provided from these GPS systems include the location of the trailer or truck at various times. Depending on how often the information is captured (15 minutes, 30 seconds or 1 second intervals, for example), it can also tell the speed a vehicle was going at a certain point in time. The White Light OPAL iVMS tracks data every second, which can help immensely with second by second accident reconstruction, to know the location and speed of the vehicle."
  },
  {
    id: "3",
    src: "https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg",
    description: "Relevant information and data that can be provided from these GPS systems include the location of the trailer or truck at various times. Depending on how often the information is captured (15 minutes, 30 seconds or 1 second intervals, for example), it can also tell the speed a vehicle was going at a certain point in time. The White Light OPAL iVMS tracks data every second, which can help immensely with second by second accident reconstruction, to know the location and speed of the vehicle."
  },
  {
    id: "4",
    src: "https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg",
    description: "Relevant information and data that can be provided from these GPS systems include the location of the trailer or truck at various times. Depending on how often the information is captured (15 minutes, 30 seconds or 1 second intervals, for example), it can also tell the speed a vehicle was going at a certain point in time. The White Light OPAL iVMS tracks data every second, which can help immensely with second by second accident reconstruction, to know the location and speed of the vehicle."
  },
  {
    id: "5",
    src: "https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg",
    description: "Relevant information and data that can be provided from these GPS systems include the location of the trailer or truck at various times. Depending on how often the information is captured (15 minutes, 30 seconds or 1 second intervals, for example), it can also tell the speed a vehicle was going at a certain point in time. The White Light OPAL iVMS tracks data every second, which can help immensely with second by second accident reconstruction, to know the location and speed of the vehicle."
  },
  {
    id: "6",
    src: "https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg",
    description: "Relevant information and data that can be provided from these GPS systems include the location of the trailer or truck at various times. Depending on how often the information is captured (15 minutes, 30 seconds or 1 second intervals, for example), it can also tell the speed a vehicle was going at a certain point in time. The White Light OPAL iVMS tracks data every second, which can help immensely with second by second accident reconstruction, to know the location and speed of the vehicle."
  },
  {
    id: "7",
    src: "https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg",
    description: "Relevant information and data that can be provided from these GPS systems include the location of the trailer or truck at various times. Depending on how often the information is captured (15 minutes, 30 seconds or 1 second intervals, for example), it can also tell the speed a vehicle was going at a certain point in time. The White Light OPAL iVMS tracks data every second, which can help immensely with second by second accident reconstruction, to know the location and speed of the vehicle."
  },
  {
    id: "8",
    src: "https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg",
    description: "Relevant information and data that can be provided from these GPS systems include the location of the trailer or truck at various times. Depending on how often the information is captured (15 minutes, 30 seconds or 1 second intervals, for example), it can also tell the speed a vehicle was going at a certain point in time. The White Light OPAL iVMS tracks data every second, which can help immensely with second by second accident reconstruction, to know the location and speed of the vehicle."
  }
];

// Making image card
function createCard(src, description, id) {
  // Container
  var container = document.createElement("div");
  container.classList.add("container");
  container.setAttribute("id", id);

  // Image
  var image = document.createElement("img");
  image.classList.add("image");
  image.setAttribute("alt", "Avatar");
  image.setAttribute("src", src);

  // button
  var btn = document.createElement("div");
  btn.classList.add("btn");
  var btnText = document.createTextNode("info");
  btn.appendChild(btnText);

  // Description
  var descr = document.createElement("div");
  descr.classList.add("description");
  var descriptionText = document.createTextNode(description);
  descr.appendChild(descriptionText);

  container.appendChild(image);
  container.appendChild(btn);
  container.appendChild(descr);

  return container;
}

window.onload = function() {
  var app = document.getElementById("app");

  // Fill the app with cards based on your data
  data.map(function(item) {
    app.appendChild(createCard(item.src, item.description, item.id));
  });

  var btns = document.body.querySelectorAll(".btn");

  btns.forEach(function(btn, index) {
    btn.addEventListener("click", function(e) {
      var description = event.target.nextSibling.innerText;
      document.getElementById("description").innerText = description;

      document.getElementById("description").style.fontSize = "10px";

      // Get the modal
      var modal = document.getElementById("myModal");

      modal.style.display = "block";

      // Get the <span> element that closes the modal
      var closeModal = document.getElementsByClassName("close")[0];
      closeModal.onclick = function() {
        modal.style.display = "none";
      };

      // When the user clicks anywhere outside of the modal, close it
      window.onclick = function(event) {
        if (event.target == modal) {
          modal.style.display = "none";
        }
      };
    });
  });
};

* {
  font-size: 0;
}

.container {
  display: inline-block;
  position: relative;
  width: 25%;
}

.image {
  display: inline-block;
  width: 100%;
  height: auto;
}

.btn {
  position: absolute;
  bottom: 5%;
  left: 20%;
  transform: translate(-50%, -50%);
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 8px 16px;
}

.btn:hover+.description {
  opacity: 1;
}

.btn:hover {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
}

.description {
  text-align: center;
  height: auto;
  //opacity: 0;
  color: black;
  position: absolute;
  top: 20%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}


/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content */

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}


/* The Close Button */

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

<div id="app"></div>

<!-- Card looks like this -->
<!--div class="container">
  <img src="#" alt="Avatar" class="image">
  <div class="btn">info</div>
  <div class="description"></div>
</div-->

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p id="description">Some text in the Modal..</p>
  </div>

</div>

Answer 2

这是另一个使用您的代码的CSS解决方案。

在此处查看工作演示。 https://jsfiddle.net/joshmoto/d7yev0xt/

出于演示目的，我还将您的类用于绝对元素和类选择器；这样您可以查看发生了什么。只要我的，就不必编写CSS选择器。

您的HTML

SELECT c.name, d.Price, d.comment, d.name, d.timestamp
FROM car c JOIN
     details d 
     ON d.ID = c.ID JOIN
     (SELECT dd.ID, MAX(dd.timestamp) as maxts, MIN(dd.timestamp) as mints
      FROM detail dd
      WHERE dd.timestamp >= datetime('now', '-1 day')
      GROUP BY dd.ID
     ) dd
     ON dd.ID = c.ID AND d.timestamp IN (dd.mints, dd.maxts)
ORDER BY timestamp asc;

CSS

<ul class="feature-showcase">
  <li>
    <figure class="features-photo">
      <img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg" alt="real-time">
      <figcaption class="long-copy">Our Telematics applied to motor vehicles can allow remote, real-time (or retrospective) monitoring of a vehicle's locations and movements by the vehicle owner or other parties. Vehicle telematics units today can not only provide accurate, continuous
        vehicle speed and location data but also straight-line acceleration, angular acceleration and deceleration data. This enables a far more complete understanding of vehicle usage which can provide many benefits; not only to the vehicle owner but
        also to other road users.</figcaption>
    </figure>
  </li>
</ul>

我正在使用FIGURE.features-photo { position: relative; } FIGURE.features-photo IMG { display: block; width: 100%; } FIGURE.features-photo:before { content: ""; display: block; background: black; opacity: 0; transition: opacity .50s ease-in-out; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } FIGURE.features-photo:hover:before { opacity: .75; } FIGURE.features-photo FIGCAPTION.long-copy { text-align: center; display: block; color: #ffffff; position: absolute; width: 90%; max-height: 90%; transition: opacity .50s ease-in-out; opacity: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); } FIGURE.features-photo:hover FIGCAPTION.long-copy { opacity: 1 }和opacity: css属性来显示鼠标悬停的描述。

我还使用transition:伪类创建黑色背景叠加图，因此我们不必依靠:before的高度和宽度为100％。

此代码仍需要一些工作，与文本溢出，省略号和设备兼容，但这只是一个开始。

如何通过悬停在图片顶部显示说明

2 个答案: