Изображение в пределах изменения div на зависании?

Я стараюсь, чтобы изображение желтого зубчатого колеса сидело внутри div с желтой рамкой и на белом фоне, а затем наведите курсор на белый, а фон изменится на желтый. В настоящее время я устанавливаю первое изображение в качестве фона div, а затем с помощью div: hover, чтобы изменить фон при наведении, однако интервал и т. Д. Не совсем работает, и граница не обходит изображение правильно. Возможно ли, чтобы изображение находилось внутри ссылки, а не как фон div? Вот код, я использую:Изображение в пределах изменения div на зависании?

HTML:

<div id="settings"> 
    <a href="settings.html"></a> 
</div>

CSS:

#settings { 
    border: 4px solid #ffff00; 
    padding: 10px 20px 10px 20px; 
    background: #fff url(img/cog_yellow.png) 0 0 no-repeat; 
} 

#settings:hover { 
    background: #ffff00 url(img/cog_white.png) 0 0 no-repeat; 
}

Любые идеи?

источник

2015-01-01 Brandon Edwards

не могли бы вы опубликовать скрипку ... это очень помогает ... – Lal

a fiddle ........? –

http://jsfiddle.net/#run здесь вы можете сделать код и поделиться им с нами, чтобы мы поняли, в чем проблема. – Lal

Возможно, хотя и не очень эффективно. Вы можете иметь два изображения и показать и скрыть их на основе парении:

HTML

<div class="button_link"> 
    <a href="settings.html"><img src="http://www.placecage.com/50/50"/></a> 
    <a href="settings.html"><img src="http://www.placecage.com/60/50"/></a> 
</div>

CSS

.button_link a:last-child{ 
    display: none; 
} 

.button_link:hover a:first-child{ 
    display: none; 
} 

.button_link:hover a:last-child{ 
    display: block; 
}

FIDDLE

Если вы можете оставить скрипку Воссоздание проблема с изображениями, которые вы используете там, вероятно, более эффективна способ сделать это только с помощью CSS и никакой дополнительной HTML участвует

UPDATE

Это, как я хотел бы сделать это, только с помощью CSS:

NEW FIDDLE

источник

2015-01-01 17:49:33 jmore009

Как бы вы предложили более эффективный способ сделать это? –

вам нужно будет воссоздать это в скрипке или разместить ссылку на свой сайт или что-то в этом роде. Без использования реальных изображений, которые вы используете, трудно найти лучшее решение. – jmore009

http://jsfiddle.net/brand0n_edwards/o62wm0ms/ –

Вы можете использовать это вместо того, чтобы:

#settings a{ 
    display:block; 
    width:100px; /* adjust your width */ 
    height:100px;/* adjust your height */ 
    border: 4px solid #ffff00; 
    padding: 10px 20px 10px 20px; 
    background: url(img/cog_yellow.png) 0 0 no-repeat; 
} 

#settings a:hover { 
    background: url(img/cog_white.png) 0 0 no-repeat; 
}

источник

2015-01-01 19:18:09 coderpol

Изображение в пределах изменения div на зависании?

ответ

Смежные вопросы