Почему: на цветную полосу и на логотип воздействует парение?

Question

Почему: на цветную полосу и на логотип воздействует парение?

0

Мне бы хотелось, чтобы он действовал только на зависании логотипа, а не на цветном баре. Я уверен, что это действительно простая причина, я просто не могу понять.

Вот JSFiddle моего кода: http://jsfiddle.net/3PgRv/

<header>
    <a href="index.html"><h1 id="logo">Dogeify</h1></a>
</header> 

header {
  background-color: #2B2B2B;
  height: 35px;
  width: 100%;
  opacity: .9;
  margin-bottom: 0px;
}

#logo {
  margin: 0;
  font-size: 1.7em;
  color: #fff;
  margin-left: 10px;
  text-decoration: none;

}

#logo:hover {
  margin: 0;
  font-size: 1.4em;
  opacity: .9;
  font-family:"Comic Sans","Comic Sans MS","Arial";
  color: #7ab800;
  margin-left: 10px;
  text-decoration: none;
}

metersk 18 янв. 2014, в 22:28

Источник

0

Он отлично работает в вашей скрипке.
digitalextremist 18 янв. 2014, в 21:06
0

Ваш "логотип" также имеет ширину 100%. Поместите цвет фона на ваш логотип, чтобы понять, что я имею в виду.
Joe 18 янв. 2014, в 21:07
0

И повторяющиеся ответы идут :)
Hashem Qolami 18 янв. 2014, в 21:09
0

Я знал, что это было очевидно! Не могу поверить, что пропустил это
metersk 18 янв. 2014, в 21:10

Показать ещё 2 комментария

Теги:

html

css

4 ответа

4

Это связано с тем, что ширина элемента H1 полностью соответствует контейнеру. Задайте определенную ширину, и тогда будет только эта область.

добавить в логотип:

#logo{
  width:100px;
}

Комментарий EDIT Per Hashem ниже, попробуйте установить display: inline-block элемент display: inline-block Это более гибкий.

Stuart 18 янв. 2014, в 19:23

1

Или настройку #logo { display: inline-block; } Fiddle Demo
Hashem Qolami 18 янв. 2014, в 21:08
0

@HashemQolami На самом деле, это лучшее решение, поскольку оно более гибкое.
rg88 18 янв. 2014, в 21:11

3

Элементы заголовка (<h1> и др.) По умолчанию являются элементами блочного уровня, поэтому ваш #logo фактически охватывает весь <header>.

Tieson T. 18 янв. 2014, в 19:27

1

Более простой - разместите <h1> вне ссылки:

<h1><a id="logo" href="#">Doge</a></h1>

H1 распространяется на 100% по ширине родителя. Но, используя его вне вашего тега #logo, вы гарантируете, что только текст ссылки может быть нависшим.

lipanski 18 янв. 2014, в 19:36

Ещё вопросы

Он отлично работает в вашей скрипке.
Ваш "логотип" также имеет ширину 100%. Поместите цвет фона на ваш логотип, чтобы понять, что я имею в виду.
Я знал, что это было очевидно! Не могу поверить, что пропустил это
Или настройку #logo { display: inline-block; } Fiddle Demo
@HashemQolami На самом деле, это лучшее решение, поскольку оно более гибкое.

Talk nerdy to me · Accepted Answer · 2014-01-18T18-17-00.000Z

логотип так же широк, как и планка. Добавьте display: inline чтобы исправить его.

#logo {
  margin: 0;
  font-size: 1.7em;
  color: #fff;
  margin-left: 10px;
  text-decoration: none;
  display: inline;
}