Question

我有一个css边框面板，使用以下代码进行渲染：

#bor_panel {
border-radius: 12px;
border: 2px solid #297293;
padding: 20px; 
width: 170px;
height: 170px;    
}

并以这种方式在页面中使用：

<div id="bor_panel"></div>

我需要以这种方式在面板中放入图像和文本。如果我用鼠标悬停图像，图像将消失并显示文本。我能怎么做？我尝试了不同的技术，但他们失去了面板内的位置。有什么想法吗？

Answer 1

#bor_panel {
  border-radius: 12px;
  border: 2px solid #297293;
  padding: 20px;
  width: 170px;
  height: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

#bor_panel:hover img {
  display: none;
}

#bor_panel:hover span {
  margin: auto;
}

<div id="bor_panel">
  <img src="http://placehold.it/170x140">
  <span>Lorem ipsum</span>
</div>

Answer 2

CSS

#bor_panel {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 2px solid #297293;
  padding: 20px; 
  width: 170px;
  height: 170px;    
}

#bor_panel:hover .image{
  display: none;
}

#bor_panel:hover h4{
  display: block;
}

h4{
  display: none;
}

HTML

<div id="bor_panel">
    <div class="image">insert image</div>
    <h4>text</h4>
</div>

Answer 3

没有改变html。

＆＃13;

#bor_panel {
  border-radius: 12px;
  border: 2px solid #297293;
  padding: 20px;
  width: 170px;
  height: 170px;
  background-image: url('http://placehold.it/170');
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
}

#bor_panel:hover {
  background-image: none;
}

#bor_panel:hover::after {
  content: 'Lorem ipsum';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

＆＃13;

<div id="bor_panel"></div>

＆＃13;

css面板与图像和文本

3 个答案: