забавный вопрос в этом горизонтальном меню CSS - PullRequest
Новая
       23

забавный вопрос в этом горизонтальном меню CSS

0 голосов
/ 17 марта 2012

Я делаю это "простое горизонтальное меню", но сталкиваюсь с забавной проблемой ...

Не знаю, как проще всего решить эту проблему: нужно ли мне использовать css или jquery (может быть, слишком много)

У вас есть ЗДЕСЬ и отл.: Что я хочу сделать, так это навести курсор на каждую ссылку и скрыть ее боковые границы.В настоящее время я получаю некоторую дополнительную ширину в зоне накрытия (границы). Это становится более сложным для 2-х звеньев внутри навигации, если вы следите за мной.

Я не знаю, смогу ли яИспользовать изображения для текста и границ и скрывать их каждый раз, когда я наводю на них или?

Есть какие-нибудь мысли о том, как мне добиться этого дизайна?КСС: 

 <style>

      .Main{ width: 900px; margin: auto;}
      .Main ul{ overflow: hidden;}
      .Main ul li{ float: left; list-style: none}
      .Main ul li a{
          width: 100px;
          height: 100px;
          background: #ffa07a;
          display: block;
      }

      .Main ul li a p{
          text-align: center;
          position: relative;
          top:40px;

      }
      .Main ul li a:hover{ background: #7cfc00; }
      .borders{
          border-right: 2px solid #7cfc00;

      }

    </style>

Ответы [ 4 ]

1 голос
/ 17 марта 2012

С помощью нескольких хитростей вы можете достичь этого.Я избавился от тегов p и переработал код CSS.Взгляните http://jsfiddle.net/elclanrs/k4mcr/

1 голос
/ 17 марта 2012

Вы не получаете дополнительную ширину.Это стандартное поведение CSS3 : 

'left'
+ 'margin-left'
+ 'border-left-width'
+ 'padding-left'
+ 'width'                   /* 100 px, bad - use 98 instead */
+ 'padding-right'
+ 'border-right-width'      /*  +2 px            +2 */
+ 'margin-right'
+ 'right'
                              =                =
= width of containing block /* 102 px,          100 */

Если вы хотите установить фиксированный размер вмещающего блока, используйте формулу выше для вычисления его ширины.Также постарайтесь сделать вашу разметку максимально простой и семантически правильной ( demo ): 

<div class="Main">
    <ul>
        <li><a>film</a></li>
        <li><a>film</a></li>
        <li><a>film</a></li>
        <li><a>film</a></li>
    </ul>
</div>

.Main{
    width: 900px;
    margin: auto;
}
.Main ul{
    width:400px;
    margin:auto;
    list-style: none;
}
.Main ul li{
    display: block;
    float: left;
    width: 98px;
    height: 100px;
    background: #ffa07a;    
    text-align: center;
    border-right: 2px solid #7cfc00;
}

.Main ul li a{    
    display:block;
    margin-top:40%;
}
.Main ul li:hover{ background: #7cfc00; }
1 голос
/ 17 марта 2012

Не знаю, правильно ли я понял вашу проблему, но вы этого хотите?

http://jsfiddle.net/RGd2P/1/

.Main ul li a:hover{
    background: #7cfc00;
    margin-left:-2px;
    width:101px;
    padding-left:1px;
}
0 голосов
/ 17 марта 2012

просто добавьте тег p после тега при наведении ... вот так 

.Main ul li a p:hover{ background: #7cfc00;width: 100px; }

спасибо

...