CSS изменить содержание при наведении

0

У меня есть некоторые значки в моем контенте, и я хочу, если бы я навешивался над одним из значков, будет что-то вроде круглых изображений вокруг значка, или значок станет больше:

Изображение 174551

Я пытался:

.pic2
{
    z-index:100;
    position:absolute;
    left:64%;
    bottom:44%;
}

.pic2:hover{
background-image:url("slicingimages/media/icon_highlight.png");
}

мой контент:

   <div id="content">
        <p2>
            <content class="contentUpper"><img src="SlicingImage/Images/alacards_coupons_illustration.png"> </img></content>
            <content class="text" id="user2">ONE PLACE TO GET REWARDS</content>
            <div><img class="pic2" src="SlicingImage/Media/gift_icon.png" height="8%" width="4%"><img></div>
            <div><img class="pic4" src="SlicingImage/Media/browser_icon.png" height="8%" width="4%"></img></div>
            <div><img class="pic5" src="SlicingImage/Media/twitter_icon.png" height="8%" width="4%"></img></div>
            <div><img class="pic6" src="SlicingImage/Media/facebook_icon.png" height="8%" width="4%"></img></div>
            <content class="text" id="user4">FROM YOUR LOYAL BRANDS</content>
            <div><a href="#" id="user" class="showLink" onclick="showHide('example10');return false;">
            <img class="back" src="SlicingImage/prev_button.png"></a></img></div>
            <div><a href="#" id="user" class="showLink" onclick="showHide('example12');return false;">
            <img class="next" src="SlicingImage/next_button.png"></img></a></div>
            <content class="text" id="homeNext"> With all your loyality card, reward points, coupons & discount vouchers </div>
        </p2>    
   </div>
  • 0
    CSS не используется для изменения атрибутов HTML. Используйте Javascript.
  • 0
    Это не меняет изображения на самом деле, но добавляет изображения icon_highlight.png ниже gift_icon.png
Теги:

4 ответа

0

Это пример использования Image Sprites (например, изображение, содержащее несколько значков) и замену одного значка на другой значок при зависании.

Вам нужно удалить изображение переднего плана и просто использовать фоновое изображение (иначе оно будет отображаться поверх фонового изображения, и вы не увидите никаких изменений). Когда вы делаете это изменение, нет никакой особой необходимости использовать тег IMG поскольку вы можете применить фоновое изображение к чему-либо.

Вы можете увидеть это в действии в этом JSFIDDLE.

.pic2{
    background-image:url("http://i.stack.imgur.com/LOxx3.jpg");
    background-repeat: no-repeat;
    background-position: left -16px center;
    display: inline-block;
    width:  46px;
    height: 46px;
    margin: 23px;
}
.pic2:hover{
    background-position: left -178px center;
    width: 92px;
    height: 92px;
    margin: 0px;
}
0

Причина, по которой он не работает, заключается в том, что для.pic2 есть тег изображения в html. Который берет на себя весь элемент. Таким образом, фокус на зависании работает правильно, он просто не появляется, потому что изображение перед ним!

Для того, чтобы это работало, только с CSS, вам нужно использовать фоновое изображение вместо тега html-изображения.

Например, вы удалили бы это

<img src="SlicingImage/Media/gift_icon.png" height="8%" width="4%">

и добавьте это в.pic2

.pic2
{
    background-image: url("SlicingImage/Media/gift_icon.png");
}

и сохраните.pic2: наведите один и тот же

0

Вы можете использовать код ниже

.pic2:hover{
       border:5px;
       //Your code
  }
0

Вы хотите показать большее изображение при наведении меньшего размера? Если это ваш вопрос, тогда вы можете попробовать под CSS.

.thumbnail
{
    background-image:url('/somesmallimgpath.png');
}


.thumbnail:hover
{
    background-image:url('/somebigimgpath.png');
}
  • 0
    Я хочу, чтобы при наведении курсора на gift_icon.png ниже этого рисунка был добавлен icon_highlight.png, могу ли я добиться этого только с помощью CSS?
  • 0
    Если вы хотите навести курсор только на одно изображение, то да, вы можете. Но если вы хотите, чтобы эта логика применялась ко всем изображениям, вы можете сохранить все имена изображений как imagename.png и более широкое имя изображения как imagename_highlight.png и установить CSS из кода позади.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню