Эффект CSS Hovering для отображения другого div

Я пытаюсь создать эффект зависания css, который должен быть скрыт divs с текстом и стрелкой вниз над кругом, и когда я навещу круг, они должны появиться.Эффект CSS Hovering для отображения другого div

Но я не мог этого сделать. Ниже кодов, которые я использовал.

Когда я парить на этой окружности, выше двух дивы должен выглядеть, что

enter image description here

<head> 
    <title>CSS Hovering Effect Practical Class</title> 
    <style type="text/css"> 

     * { 
     margin:0; 
     padding:0; 
     } 

     #wrap { 
     background:#4485F5; 
     margin:10px 0; 
     padding:30px; 
     text-align:center; 
     } 

     h1 { 
     color:#fff; 
     letter-spacing:2px; 
     font-size:50px; 
     margin-bottom:15px; 
     } 

     p { 
     color:#fff; 
     background:#944E90; 
     width:600px; 
     font-size:25px; 
     padding:3px; 
     margin:auto; 
     } 

     span { 
     font-style:italic; 
     } 

     #features { 
     margin: 25px 0; 
     } 

     #baloon { 
     color:#ddd; 
     margin:auto; 
     padding:15px; 
     font-size:16px; 
     letter-spacing:1px; 
     background:url('bg.png') repeat; 
     width:200px; 
     position:relative; 
     border-radius:5px; 
     } 

     #blackarrow { 
     background:url('blackarrow.png') no-repeat top center; 
     margin:auto; 
     height:15px; 
     width:15px; 
     margin-top:-7px; 
     } 

     #circle { 
     } 

     #circle img{ 
     height:50px; 
     width:50px; 
     background:#fff; 
     padding:50px; 
     border:5px solid #00AEF0; 
     border-radius:500px; 
     transition:0.5s ease; 
     } 

     #circle img:hover { 
     height:60px; 
     width:60px; 
     background:#ddd; 
     padding:60px; 
     border:8px solid #00AEF0; 
     border-radius:500px; 
     } 

     #circle:hover > #baloon { 
     display: inline; 
     } 

     #inner { 
     } 

     #img {} 

    </style> 
</head> 

<body> 
    <div id="wrap"> 
      <h1>Welcome to <span> CodeforBusiness</span> Site</h1> 
      <p>Your trusted web designing service provider for a decade</p> 
     <div id="features"> 
      <div id="baloon">Best web designing services with our team</div> 
      <div id="blackarrow"></div> 
      <div id="circle"><img src="avatar.gif" /></div> 
     </div> 
    </div> 

</body>

источник

2014-01-02 Azizul Haque

> означает прямого ребенка. Если вы хотите использовать #baloon, когда вы наводите курсор на #circle, #baloon должен либо быть ребенком, либо элементом после круга. – Chad

Как @Chad сказал, вы структурирован ваш CSS таким образом, что вам на самом деле не выбирают #balloon div on hover. Селектор > является immediate child selector, поэтому для того, чтобы в CSS, чтобы работать так, как вы написали, ваш HTML должен будет выглядеть следующим образом:

<div id="wrap"> 
     <h1>Welcome to <span> CodeforBusiness</span> Site</h1> 
     <p>Your trusted web designing service provider for a decade</p> 
    <div id="features"> 
     <div id="blackarrow"></div> 
     <div id="circle"> 
      <div id="baloon">Best web designing services with our team</div> 
      <img src="avatar.gif" /> 
     </div> 
    </div> 
</div>

Это выполнимо решение, если вам удобно changine структура ,

Вы бы изменить #balloon стили к чему-то вроде этого:

#baloon { 
     display:none; 
     position:absolute; 
     width:200px; 
     top:-100px; 
     left:50%; 
     margin-left:-115px; 
     padding:15px; 
     font-size:16px; 
     letter-spacing:1px; 
     background:rgba(0, 0, 0, .5); 
     border-radius:5px; 
     color:#ddd; 
    }

И стиль #circle & :hover к этому:

#circle { 
     display:block; 
     position:relative; 
    } 

    #circle:hover > #baloon { 
     display: block; 
    }

Позвольте мне знать, если вам нужна помощь, позиционирование баллона.

Here is a working jsfiddle

источник

2014-01-02 15:48:28 robabby

С разметке это невозможно достичь, потому что текущие селекторы CSS не могут предназначаться элементы, которые являются родители, братья и сестры только в очень ограниченном виде через общий родственный комбинатор ~ или более полезным смежный родственный комбинатор + (See docs).

Лучше выбрать другую вложенную структуру, чтобы эффект зависания работал.

<div id="features"> 
     <div id="circle"></div> 
     <div id="description"> 
      <div id="baloon">Best web designing services with our team</div> 
      <div id="blackarrow"></div> 
     </div> 
</div>

Теперь с #description ДИВ быть смежной родственными после того, как ваш круг, вы можете ориентировать его через +. (Если у вас несколько элементов, вам нужен этот контейнер, если внутри него находится только один элемент #baloon), вы также можете настроить таргетинг на него).

#circle:hover + #description { 
    display:none; 
}

Взгляните на мои минимальные example. Вам нужно только фиксировать позиционирование, и все готово.

источник

2014-01-02 15:50:41 Christoph

Как говорится в комментарии Чада, «>» - это дочерний селектор. Балун должен быть внутри элемента круга. То, что вы хотите, - это селектор. «+» Означает, смежный родственный (сразу после), и «~» является общим селектор родственный, который, вероятно, что вы хотите:

#circle:hover ~ #baloon

Обратите внимание, что «Baloon» должен прийти ПОСЛЕ «круг в разметке , поэтому вам нужно будет разыграть свои элементы, чтобы это сработало (например, положите круг).

источник

2014-01-02 15:53:18 sn3ll

Эффект CSS Hovering для отображения другого div

ответ

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