Question

我有一个带图像的网络对象。有人可以告诉我，如何将我的图像转换为按钮？是否有一种方法可以在图像上使用文本悬停效果。因此，当我将鼠标悬停在图像按钮或文本上时，章节名称应该出现。

HTML：

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>image button</title>

  <link rel="stylesheet" href="css/normalize.min.css">
      <link rel="stylesheet" href="css/style.css">

</head>

<body>
 <div id="container">

  <div id="btn1" class="background">
    <p align="center">Chapter 1<br>Topic Name</p>   
  </div>
  <div id="btn2" class="background">
    <p align="center">Chapter 2<br>Topic Name</p>
  </div>
  <div id="btn3" class="background">
    <p align="center">Chapter 3<br>Topic Name</p>
  </div>
  <div id="btn4" class="background">
    <p align="center">Chapter 4<br>Topic Name</p>
  </div>
  <div id="btn5" class="background">
    <p align="center">Chapter 5<br>Topic Name</p>
  </div>
  <div id="btn6" class="backgroundrow2">
    <p align="center">Chapter 6<br>Topic Name</p>
  </div>
  <div id="btn7" class="backgroundrow2">
    <p align="center">Chapter 7<br>Topic Name</p>
  </div>
  <div id="btn8" class="backgroundrow2">
    <p align="center">Chapter 8<br>Topic Name</p>
  </div>
  <div id="btn9" class="backgroundrow2">
    <p align="center">Chapter 9<br>Topic Name</p>
  </div>
 </div>

</body>
</html>

CSS：

* {
  box-sizing: border-box;
}

html, body{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;

}

#container{
        width: 1280px;
        height: 720px;
        background-color: rgba(201, 193, 184, 0.0);
        overflow: hidden;
        clip: rect(0px, 1280px, 720px, 0px);
}

.background {
  margin-top: 100px;
  margin-left: 65px;
  margin-bottom: -30px;
  width: 174px;
  height: 215px;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  box-shadow: 5px 5px 5px #888888;
}

.backgroundrow2{
  margin-top: 100px;
  margin-left: 185px;
  margin-right: -120px;
  margin-bottom: -30px;
  width: 174px;
  height: 215px;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  box-shadow: 5px 5px 5px #888888;
}

p {
  position: relative;
  height: 43%;
  top: 25%;
  background: rgba(84, 83, 74, 1);
  color: #fff;
  padding-top: 0.1rem;
  padding-left: 1.5rem;
  padding-right: 1.8rem;
  line-height: 1.6;
  margin: 0px;
  transform: translateY(140%);
  -webkit-transition: .65s ease-in-out;
  transition: .65s ease-in-out;
}

p:hover {
  top: 0;
}

p:before {
  position: absolute;
  margin: 0 auto;
  left: 42.5%;
  top: -0.9rem;
  content: "";
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
  border-bottom: 1rem solid rgba(84, 83, 74, 1);
}

#btn1{
        background: url("https://www.bensound.com/bensound-img/romantic.jpg") center no-repeat;
        background-size: 174px 215px;
}

#btn2{
        background: url("https://www.bensound.com/bensound-img/romantic.jpg") center no-repeat;
        background-size: 174px 215px;
}

#btn3{
        background: url("https://www.bensound.com/bensound-img/romantic.jpg") center no-repeat;
        background-size: 174px 215px;
}

#btn4{
        background: url("https://www.bensound.com/bensound-img/romantic.jpg") center no-repeat;
        background-size: 174px 215px;
}

#btn5{
        background: url("https://www.bensound.com/bensound-img/romantic.jpg") center no-repeat;
        background-size: 174px 215px;
}

#btn6{
        background: url("https://www.bensound.com/bensound-img/romantic.jpg") center no-repeat;
        background-size: 174px 215px;
}

#btn7{
        background: url("https://www.bensound.com/bensound-img/romantic.jpg") center no-repeat;
        background-size: 174px 215px;
}

#btn8{
        background: url("https://www.bensound.com/bensound-img/romantic.jpg") center no-repeat;
        background-size: 174px 215px;
}

#btn9{
        background: url("https://www.bensound.com/bensound-img/romantic.jpg") center no-repeat;
        background-size: 174px 215px;
}

Answer 1

我应该怎样做才能将图像变成按钮？

更改自：

<div id="btn1" class="background">...</div>

链接：

<a id="btn1" href="#" class="background">...</a>

还有一种方法可以在图像上使用文本悬停效果。

您可以将:hover应用于后台课程......

.background:hover p {
  top: 0;
}

请参阅小提琴：https://jsfiddle.net/nm8bg4ee/2/

将图像更改为按钮

1 个答案: