CSS3 - Переход

У меня возникла небольшая проблема с CSS. Я следую за книгой, чтобы узнать CSS3, и я только что открыл функцию Transition. Итак, я решил попытаться, и я не могу понять, где я ошибаюсь, надеюсь, вы можете мне помочь.CSS3 - Переход

Это мой файл index.html

<html> 
<head> 
    <title>My Test</title> 
    <link rel="stylesheet" type="text/css" href="main.css"> 
</head> 
<body> 

<div class="box"></div> 
<div class="ssin"></div> 

</body> 
</html>

ничего особенного! и это main.css

.box{ 
    height: 200px; 
    width: 200px; 
    background-color: #333333; 
} 

.ssin{ 
    height: 200px; 
    width: 200px; 
    background-color: red; 
} 

.box:hover .ssin{ 
    width: 500 
}

я думаю, что проблема здесь ...

.box:hover .ssin{ 
    width: 500; 
}

, если я иду с помощью мыши. коробка ничего не происходит, но вместо этого следует, теоретически, изменить ширину ssin

Можете ли вы мне помочь (я знаю его глупо, но я учусь)

Извините за мой плохой анг.

Спасибо

источник

2013-02-27 Wanny Miarelli

В HTML вы оставили там ssin не внутри box. .box:hover .ssin выбирает что-то с классом ssin внутри box. Я считаю, что вам нужен соседний селектор: .box:hover + .ssin

источник

2013-02-27 16:10:07

Да, просто идиот! теперь это работает. Спасибо вам, ребята. –

Попробуйте это,

.box:hover .ssin{ 
    width: 500px; 
}

я думаю width: 500px; отсутствует

источник

2013-02-27 16:06:33

Посмотрите на разметку. Селектор '.box .ssin' не соответствует ни одному элементу. – BenM

Спасибо, я идиот. –

Вы упускаете измерения от width собственности, но разметка не позволит то, что вы» пытаюсь добиться.

.box:hover .ssin будет производить только триггер, если .ssin является ребенком .box. Если вы хотите, чтобы оживить ширину .ssin когда .box наведен, вы должны будете использовать смежный селектор родственного в CSS (+):

.box:hover + .ssin { 
    width: 500px; 
}

Если вы хотите, чтобы элемент для анимации, вам нужно добавить соответствующие свойства CSS тоже:

.ssin { 
    -webkit-transition: width 0.2s linear; 
     -moz-transition: width 0.2s linear; 
      transition: width 0.2s linear; 
}

Вот jsFiddle demo.

источник

2013-02-27 16:06:43 BenM

Поскольку вы пытаетесь изучить CSS3 Transition, я предполагаю, что вы пытаетесь увеличить размер окна. Итак, ваша разметка немного ошибочна. ssin должен быть внутри .box

<div class="box"> 
    <div class="ssin"></div> 
</div>

И добавить переход CSS в код

.ssin { 
    -webkit-transition: all 0.5s linear; 
     -moz-transition: all 0.5s linear; 
      transition: all 0.5s linear; 
}

источник

2013-02-27 16:17:37 Starx

Почему бы просто не использовать соседний селектор, как показано в моем ответе? Он избегает любой необходимости менять свою разметку ... – BenM

Я могу использовать оба варианта, но в этом случае Sibiling не требуется. Я хочу сместить надпись над полем класса. Я только что добавил .ssin внутри .box, тогда я добавил переполнение: скрытый и -webkit-переход, и он работает. –

CSS3 - Переход

ответ

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