www.cleantelligent.com/tour を見ると、スタイリッシュで便利なアクティブで実用的なツールチップが表示されます。これらは、JS や jQuery を一切使用しない純粋な CSS です。
WordPress のインストールに移行し、コードをライブ サイトから beta.cleantelligent.com/tour にコピー アンド ペーストしようとしています。何らかの理由で、CSS が読み取られていません。
これは WordPress の問題ですか? 私のコードを別の方法で読んでいますか？
/*TOUR LANDING PAGE*/
a .tooltiptour span{
color: #1982d1;
text-decoration: none;
transition-property: opacity;
transition-duration: 1s;
background: none repeat scroll 0% 0% rgb(159, 218, 238);
border: 1px solid rgb(43, 176, 215);
}
.tooltiptour {
color: #000000;
outline: none;
text-decoration: none;
position: relative;
}
.tooltiptour span {
margin-left: -999em;
position: absolute;
opacity: 0;
transition: opacity .3s ease-in-out !important;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
}
.tooltiptour:hover span {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px 5px;
-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
font-family: 'News Cycle', sans-serif;
position: absolute;
left: 4em;
top: -1.9em;
z-index: 99;
margin-left: 0;
width: 280px;
opacity: 1;
}
.tooltiptour:hover img {
border: 0;
margin: 0px 0 0 -95px;
float: left;
position: absolute;
width: 85px;
height: 85px;
}
.tooltiptour:hover h2 {
font-family: 'Vollkorn', serif;
font-weight: bold;
display: block;
color: #373737;
margin: 0.8125em 0;
font-size: 24px;
line-height: 0.1em;
}
.splashtipstour {
padding: 0.8em 1em;
}
* html a:hover {
background: transparent;
}
.splashtipstour {
padding: 0.5em 0.8em 0.8em 2em;
background: rgb(246,248,249); /* Old browsers */
background: -moz-linear-gradient(top, rgba(246,248,249,1) 44%, rgba(245,247,249,1) 52%, rgba(215,222,227,1) 70%, rgba(147,143,143,1) 98%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(44%,rgba(246,248,249,1)), color-stop(52%,rgba(245,247,249,1)), color-stop(70%,rgba(215,222,227,1)), color-stop(98%,rgba(147,143,143,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(246,248,249,1) 44%,rgba(245,247,249,1) 52%,rgba(215,222,227,1) 70%,rgba(147,143,143,1) 98%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(246,248,249,1) 44%,rgba(245,247,249,1) 52%,rgba(215,222,227,1) 70%,rgba(147,143,143,1) 98%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(246,248,249,1) 44%,rgba(245,247,249,1) 52%,rgba(215,222,227,1) 70%,rgba(147,143,143,1) 98%); /* IE10+ */
background: linear-gradient(to bottom, rgba(246,248,249,1) 44%,rgba(245,247,249,1) 52%,rgba(215,222,227,1) 70%,rgba(147,143,143,1) 98%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#938f8f',GradientType=0 ); /* IE6-9 */
border: 1px solid #FFFFD1;
}
/*END TOUR LANDING*/