我在标题中添加了“我的帐户”链接和“愿望清单”链接。它在首页上显示正常,但是当我转到其他任何页面时,图像不再显示,我所看到的只是Alt文本。
有人可以帮助我调整代码,以便在所有页面上正确显示相同的图像吗? :-)
我已尝试这样做,以使图片在悬停时通过将一个图片放在另一个图片下方来改变颜色...
PHP:
<div id="myaccount">
<a href="wordpress/my-account"><img class="bottom" src="wp-
content/themes/mt_theme/images/my_account_hover.png" alt="My
Account"/>
<img class="top" src="wp-content/themes/my_theme/images/my_account.png" alt="My Account"/>
<p class="icotext">My Account</p>
</a>
</div>
<div id="wishlist">
<a href="wishlist"><img class="bottom2" src="wp-content/themes/smy_theme/images/wishlist_hover.ico" alt="Wishlist"/>
心愿单
CSS:
#myaccount{
position: relative;
margin: 0 auto;
}
#myaccount img {
position:absolute;
left:900px;
top: -20px;
Height: 50px !important;
width: 50px !important;
}
a:hover img.top {
opacity:0;
}
.icotext{
position: absolute;
left: 890px;
top: 28px;
color: #000000
}
a:hover .icotext{
font-weight: bold;
left: 888px;
}
#wishlist{
position: relative;
margin: 0 auto;
}
#wishlist img {
position:absolute;
left:990px;
top: -20px;
Height: 50px !important;
width: 50px !important;
}
.icotext2{
position: absolute;
left: 992px;
top: 28px;
color: #000000
}
a:hover .icotext2{
font-weight: bold;
left: 990px;
}
a:hover img.top2 {
opacity:0;
}
img.bottom2 {
opacity:0;
}
a:hover img.bottom2 {
opacity:1;
}
img.bottom {
opacity:0;
}
a:hover img.bottom {
opacity:1;
最佳答案
我猜想其他页面正在尝试从另一个文件夹获取图像。
src="wp-content/themes/my_theme/images/my_account.png"
您正在使用一个相对地址,该相对地址被解释为“ {当前文件夹} / wp-content / ...”
尝试使用
src="/wp-content/themes/my_theme/images/my_account.png"
前面的/将解释为“ {site_root} / wp-content / ...”