我一直在尝试在我的客户端在此页面上实现许多不同的工具提示,他坚持认为当您将鼠标悬停在订单页面中的产品名称时,我们会显示该产品的图片.我决定使用超级简单的CSS工具提示,它很容易实现,并且完全符合我们的要求.它适用于动态页面,我试过的其他页面没有.
我在这里做了一个例子:表示例中的CSS工具提示.< - 已更新以删除错误.
HTML:
| Varekode | Produkt | Pris | Antall | Pris Total | Slett | |
|---|---|---|---|---|---|---|
| 39261-02 |
Plantronics CS361N
|
2390.- | 2390.-2390.- | Remove | ||
| 7050-20 | Target 7050CC Duo UNC
Skal tilkobles: Alcatel IP Touch
|
899.- | (1599.-) | 899.-899.- | Remove | |
| Mva (25%): | 822.- | |||||
| Totalt: | 4111.- | |||||
CSS:
.cart2Produkt a:hover {
background: #ffffff;
text-decoration: none;
z-index: 999;
}
/*BG color is a must for IE6*/
.tooltip {
text-align: left;
}
.cart2Produkt a.tooltip span {
z-index: 999;
display: block;
position: absolute;
left: -999px;
opacity: 0;
padding: 2px 3px;
margin-left: 8px;
width: 130px;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 500ms;
}
.cart2Produkt a.tooltip:hover span {
z-index: 999;
display: block;
position: absolute;
right: 50%;
opacity: 1;
background: #ffffff;
border: 1px solid #cccccc;
color: #6c6c6c;
top: -35px;
left: -15px;
z-index: 10;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-align: center;
vertical-align: middle;
padding: 1px;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
/**************IGNORE BELOW*************/
#topborder {
/*border-top: 1px #ccc solid;*/
padding-bottom: 10px;
}
#topborder-tr {
border-top: 1px #ccc solid;
}
.mytable {
width: 100%;
margin-bottom: 20px;
}
.mytable,
.mytable th,
.mytable tr,
.mytable td {
border: 0;
letter-spacing: 1px;
}
.mytableborders,
.mytableborders th,
.mytableborders tr,
.mytableborders td {
border: 1px #ccc solid;
/*width:670px;*/
}
.mytable td,
.mytable td span {
padding-bottom: 0;
padding-top: 5px;
/*border-top: 1px #ccc solid;*/
vertical-align: middle;
font-size: 12px;
}
.mytable th {
vertical-align: bottom;
height: 30px;
padding-bottom: 5px;
}
#titles {
margin: 0px auto 0px auto;
width: 100%;
padding-bottom: 50px;
z-index: 1;
border: 1px #ccc solid;
border-left: none;
border-right: none;
}
.cart2Produkt a {
color: #0a5692;
text-decoration: none;
line-height: 15px;
clear: both;
z-index: 999;
}
productOptionsMenu {
clear: both;
}
#pristotaltext p,
#varekodetext p,
#sletttext p,
#pristext p,
#antalltext p,
#produkttext p {
font: 12px/11px "Helvetica";
margin: 0px;
color: #828273;
text-align: left;
}
#thinline,
#thinlinecopy {
background: url(../../upload/thinline.png) no-repeat;
visibility: visible;
position: absolute;
left: 0px;
z-index: 4;
width: 747px;
height: 1px;
}
#thinlinefakt {
background: url(../../upload/thinline.png) no-repeat;
visibility: visible;
position: absolute;
top: 100px;
left: 0px;
z-index: 4;
width: 747px;
height: 1px;
}
#thinlinefakt2 {
background: url(../../upload/thinline.png) no-repeat;
background-position: bottom;
visibility: visible;
position: absolute;
top: 205px;
left: 0px;
z-index: 4;
width: 747px;
height: 28px;
margin: 5px;
margin-left: 10px;
margin-top: 0px;
padding: 5px;
color: #000000;
font-size: 22px;
font-family: "Helvetica";
}
.Fadresse {
display: block;
margin: 5px;
padding: 0;
color: #000000;
font-size: 22px;
font-family: "Helvetica";
}
#thinlinecopylever {
background: url(../../upload/thinline.png) no-repeat;
background-repeat: repeat-x;
position: relative;
left: 0px;
top: -3px;
width: 100%;
height: 1px;
padding: 0px;
}
#varekodetext {
width: 65px;
padding-left: 5px;
text-align: center;
}
#produkttext {
width: 150px;
}
/*#sgproductview {
margin: 0px auto 0px auto;
width: 595px;
height:1%;
z-index:1;
}*/
#thinlinecopy {
top: 1px;
}
#antalltext {
width: 25px;
text-align: center;
}
#pristotaltext {
width: 10%;
text-align: right;
}
#sletttext {
width: 10%;
text-align: center;
}
#thinline {
top: 19px;
position: absolute;
}
#pristext {
width: 24px;
text-align: center;
}
#emptee {
background-color: none;
width: 40px;
}
/*****************************************CONTENT*/
.cart2Produkt p,
.cart2Varekode p,
.cart2Salg p {
font: 13px/11px "Helvetica";
margin: 0px;
letter-spacing: 1px;
text-align: left;
}
.cart2Produkt p a {
color: #000000;
}
.cart2Total p {
font: 13px/11px "Helvetica";
margin: 0px;
letter-spacing: 1px;
text-align: left;
color: #000000;
}
.cart2Varekode {
visibility: visible;
z-index: 2;
text-align: center;
vertical-align: top;
padding-top: 3px;
font-weight: bold;
}
.cart2Produkt {
visibility: visible;
text-decoration: none;
text-align: left;
position: relative;
width: 28%;
font-weight: bold;
padding-bottom: 2px;
}
.cart2Produkt a {
white-space: nowrap;
}
.cart2Price {
visibility: visible;
z-index: 2;
text-align: right;
width: 6%;
position: relative;
font-weight: bold;
}
.cart2Price p {
font: 13px/11px "Helvetica";
margin: 0px;
letter-spacing: 1px;
text-align: right;
width: 80%;
}
.cart2Total p {
font-weight: bold;
text-align: right;
}
.cart2Salg p {
color: #B2B2B2;
width: 20%;
}
.cart2Total {
visibility: visible;
z-index: 2;
text-align: right;
font-weight: bold;
}
.antallbox {
white-space: nowrap;
text-align: center;
}
.antallbox input {
text-align: right;
outline: none;
width: 30px;
}
.antallbox input:focus {
text-align: right;
outline: none;
border: 1px #000 solid;
background-color: #F0F7FD;
}
.cartQuant {
width: 30px;
/* white-space: nowrap;*/
text-align: left;
margin-top: 5px;
}
.cart2Salg {
visibility: visible;
z-index: 2;
padding: 0;
margin: 0;
}
.orderlistPrice {
text-decoration: line-through;
font-weight: bold;
color: #b2b2b2;
font-size: 12px;
}
.salg {
background: url(../../upload/salg.png) no-repeat;
visibility: visible;
z-index: 2;
width: 28px;
height: 24px;
display: inline-block;
position: relative;
}
.delete {
visibility: visible;
z-index: 2;
height: 21px;
background: none;
text-align: center;
}
.slett {
width: 24px;
height: 19px;
background-image: url(../../upload/delete_box_sprite.png);
background-position: 0 0;
text-decoration: none;
display: inline-block;
}
.slett:hover {
width: 24px;
height: 19px;
background-image: url(../../upload/delete_box_sprite.png);
background-position: -24px 0;
text-decoration: none;
display: inline-block;
}
.productOptions {
background-color: #fff;
postion: absolute;
visibility: visible;
display: block;
top: 3px;
padding-left: 5px;
padding-bottom: 10px;
}
.nonEditableOption {
background-color: #fff;
float: left;
postion: absolute;
margin-right: 10px;
visibility: visible;
display: block;
}
此页面曾经使用div显示,我已将其更改为表格,因为它是表格数据并且更易于使用.当它使用div时它工作正常,现在它在一个表中,它不会在悬停时显示跨度.
我的问题是:
为什么不起作用？
我怎样才能使它工作？
如果没有,有没有人知道另一个超级易于实现的工具提示,可以在动态页面上正常工作？
这是DIV工具提示供参考:DIV显示工具提示.
HTML:
CSS:
#JSwrap {
/*for jsfiddle only*/
position: absolute;
left: 100px;
top: 50px;
}
#cart2Produkt {
border: 1px solid #ccc;
width: 500px;
text-align: left;
padding: 10px;
}
#cart2Produkt a.tooltip span {
z-index: 999;
display: block;
position: absolute;
left: -999px;
opacity: 0;
padding: 2px 3px;
margin-left: 8px;
width: 130px;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 500ms;
}
#cart2Produkt a.tooltip:hover span {
z-index: 999;
display: block;
position: absolute;
right: 50%;
opacity: 1;
background: #ffffff;
border: 1px solid #cccccc;
color: #6c6c6c;
top: -35px;
left: -15px;
z-index: 10;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-align: center;
vertical-align: middle;
padding: 1px;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#cart2Produkt img {
z-index: 999;
}
编辑:刚刚注意到它的一半在IE8中运行.
更新:它现在在所有浏览器中工作,感谢Daniel指出我的CSS错误,但有没有办法让它显示在表格单元格之外？
在此处找到更易读的工作解决方案:
.cart { width: 100%; }
.hasTooltip span {
display: none;
color: #000;
text-decoration: none;
padding: 3px;
}
.hasTooltip:hover span {
display: block;
position: absolute;
background-color: #FFF;
border: 1px solid #CCC;
margin: 2px 10px;
}
Pos
Product
Price
1
Flatscreen
New visual experience!
19.99
2
Headset
Inject music directly into your ears!
19.99
京公网安备 11010802040832号 | 京ICP备19059560号-6 