راهنمایی در کدنویسی اچ تی ام ال

[صدرا حسابی]

دلیلش اینه که به جای اشتباهی دارید کد رو اعمال می کنید، و نکته دیگه سبک بودن css خیلی اهمیت داره تا جای که ممکنه کدارو کوتاه کنید و از گرو استفاده کنید، شما کدهای css که برای این 4 آیکن نوشتید رو پاک کتید و اینهارو اضافه کنید، هم hover به درستی کار می کنه و هم کدها خلاصه شدن، برای تگ ها هم چون از float:right استفاده کردم جای iconها برعکس شده و می تونید در html جابه جاشون کنید.

کد: (انتخاب همه)

#icon1, #icon2, #icon3, #icon4 {
    text-align: center;
    float: right;
    padding: 0 15px;
    margin-left: 5px;
    border: 1px solid transparent;
}
#icon1:hover, #icon2:hover, #icon3:hover, #icon4:hover {
    background: #437C00;
    border: 1px solid #69A226;
}
#icon1 div, #icon2 div, #icon3 div, #icon4 div {
    margin: -5px;
}
#icon1 a, #icon2 a, #icon3 a, #icon4 a {
    text-decoration: none !important;
}

*البته این توضیحات جنبه آموزش داشت فقط، چون چند افزونه مختلف در خود جوملا قابلیت ساخت منوی تصویری دارند.

* می تونید از طریق css3 هم کاری کنید که وقتی موس روی تصاویر رفت رنگ با افکت عوض بشه، ( #icon1, #icon2, #icon3, #icon4 ). برای تولید کد برای مرورگرهای مختلف می تونید از مولد css3 که در امضام هست و گزینه افکت اسفاده کنید.