Question

如何创建以下悬停效果？

我试着这样做：

＆＃13;

a.apparat {
  color: #4a4a4a;
}
a.apparat:hover{
  color: #1c97a9;
  text-decoration: none;
}
img.catalog_apparat {
  border: 2px solid #4a4a4a;
  width: 250px;
  height: 250px
}
img.catalog_apparat:hover {
  border: 2px solid #1c97a9;
}
.apparat_description {
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight: bolder;
  font-size: 14px;
  margin:6px 0 10px;
  text-align: center;
}
.apparat_description:hover .catalog_apparat {
  border: 2px solid red;
}

＆＃13;

<a href="#" class="apparat">
  <img src="http://storage2.static.itmages.ru/i/16/0614/h_1465880975_7122477_d666884232.png" alt="Apparat 1" class="catalog_apparat">
  <div class="apparat_description">Gynecology</div>
</a>

＆＃13;

如何将文本居中放置在图像下方，如何使底部三角形与示例匹配？

Answer 1

试试这个：

＆＃13;

{
'customer':{
            'custId':111,
            ...
            ...,
            {
            'transactions':{
                        'tid':'t001',
                        'tname':'purchase',
                        'amt':'5000'
            },
            'transactions':{
                        'tid':'t002',
                        'tname':'credit',
                        'amt':'15000'
            },
            'transactions':{
                        'tid':'t001',
                        'tname':'debit',
                        'amt':'6500'
            }
            }

},
'customer':{
        'custId':112,
            ...
            ...
            {
            'transactions':{
                        'tid':'t011',
                        'tname':'purchase',
                        'amt':'51000'
            },
            'transactions':{
                        'tid':'t002',
                        'tname':'credit',
                        'amt':'15200'
            },
            'transactions':{
                        'tid':'t001',
                        'tname':'debit',
                        'amt':'6509'
            }
            }
}
'customer':{
        'custId':113,
            ...
            ...
            {
            'transactions':{
                        'tid':'t001',
                        'tname':'purchase',
                        'amt':'5900'
            },
            'transactions':{
                        'tid':'t3302',
                        'tname':'credit',
                        'amt':'18000'
            },
            'transactions':{
                        'tid':'t401',
                        'tname':'debit',
                        'amt':'5800'
            }
            }
}
...

}

＆＃13;

a.apparat {
color: #4a4a4a;

float:left;
margin:5px;
}
a.apparat:hover{
	color: #1c97a9;
	text-decoration: none;
}
.img-box{
  position:relative;
}
.img-box:before{
  content:"";
  position:absolute;
  bottom:-4px;
  left:50%;
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;  
  border-top: 10px solid #4a4a4a;
  margin-left: -5px;

}
.img-box:after{
  content:"";
  position:absolute;
  bottom:-1px;
  left:50%;
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;  
  border-top: 10px solid #fff;
  margin-left: -5px;

}
a:hover .img-box:before{
border-top: 10px solid #1c97a9;
}
img.catalog_apparat {
	border: 2px solid #4a4a4a;
	width: 250px;
	height: 250px
}
a:hover img.catalog_apparat{
	border: 2px solid #1c97a9;
}
.apparat_description {
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: bolder;
	font-size: 14px;
	margin:6px 0 10px;
  text-align: center;
}
.apparat_description:hover .catalog_apparat {
	border: 2px solid red;
}

＆＃13;

Answer 2

以下是用于使文本居中的更新代码。

a.apparat {
    color: #4a4a4a;
    float: left;
    margin: 5px;
    position: relative;
}
a.apparat:hover{
    color: #1c97a9;
    text-decoration: none;
}
a.apparat:before {
    content: "";
    position: absolute;
    bottom: 29px;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #4a4a4a;
    margin-left: -5px;
}
a.apparat:hover:before{
    border-top: 10px solid #1c97a9;
}
img.catalog_apparat {
    border: 2px solid #4a4a4a;
    width: 250px;
    height: 250px
}
img.catalog_apparat:hover {
    border: 2px solid #1c97a9;
}
.apparat_description {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: bolder;
    font-size: 14px;
    margin:6px 0 10px;
    text-align: center;
}
.apparat_description:hover .catalog_apparat {
    border: 2px solid red;
}

<a href="#" class="apparat">
    <img src="http://storage2.static.itmages.ru/i/16/0614/h_1465880975_7122477_d666884232.png" alt="Apparat 1" class="catalog_apparat">
    <div class="apparat_description">Gynecology</div>
</a>
<a href="#" class="apparat">
    <img src="http://storage2.static.itmages.ru/i/16/0614/h_1465880975_7122477_d666884232.png" alt="Apparat 1" class="catalog_apparat">
    <div class="apparat_description">Gynecology</div>
</a>
<a href="#" class="apparat">
    <img src="http://storage2.static.itmages.ru/i/16/0614/h_1465880975_7122477_d666884232.png" alt="Apparat 1" class="catalog_apparat">
    <div class="apparat_description">Gynecology</div>
</a>

Answer 3

＆＃13;

a.apparat {
  display: inline-block;
  text-decoration: none;
  vertical-align: top;
  text-align: center;
  color: #4a4a4a;
}
a.apparat:hover {
  color: #1c97a9;
  text-decoration: none;
}
.apparat_image {
  border: 2px solid #4a4a4a;
  position: relative;
  width: 250px;
  height: 250px;
}
.apparat_image:before,
.apparat_image:after {
  border-color: #4a4a4a transparent transparent;
  border-width: 10px 9px 0;
  border-style: solid;
  position: absolute;
  margin-left: -9px;
  bottom: -10px;
  content: '';
  left: 50%;
  height: 0;
  width: 0;
}
.apparat_image:after {
  border-color: #fff transparent transparent;
  border-width: 9px 7px 0;
  margin-left: -7px;
  bottom: -8px;
  
}
a.apparat:hover .apparat_image:before {
  border-color: #1c97a9 transparent transparent;
}
a.apparat:hover .apparat_image {
  border-color: #1c97a9;
}
img.catalog_apparat {
  display: block;
  height: auto;
  width: 100%;
}

.apparat_description {
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight: bolder;
  font-size: 14px;
  margin:6px 0 10px;
  text-align: center;
}
.apparat_description:hover .catalog_apparat {
  border: 2px solid red;
}

＆＃13;

<a href="#" class="apparat">
  <div class="apparat_image">
    <img src="http://storage2.static.itmages.ru/i/16/0614/h_1465880975_7122477_d666884232.png" alt="Apparat 1">
  </div>
  <div class="apparat_description">Gynecology</div>
</a>
<a href="#" class="apparat">
  <div class="apparat_image">
    <img src="http://storage2.static.itmages.ru/i/16/0614/h_1465880975_7122477_d666884232.png" alt="Apparat 1">
  </div>
  <div class="apparat_description">Gynecology</div>
</a>
<a href="#" class="apparat">
  <div class="apparat_image">
    <img src="http://storage2.static.itmages.ru/i/16/0614/h_1465880975_7122477_d666884232.png" alt="Apparat 1">
  </div>
  <div class="apparat_description">Gynecology</div>
</a>
<a href="#" class="apparat">
  <div class="apparat_image">
    <img src="http://storage2.static.itmages.ru/i/16/0614/h_1465880975_7122477_d666884232.png" alt="Apparat 1">
  </div>
  <div class="apparat_description">Gynecology</div>
</a>

＆＃13;

当鼠标悬停在图片上时效果

3 个答案: