How to create a css hoverover box with two section


Tags: html,css

Problem :

I have used the following How to creat a box when mouse over text in pure css?

and switch the position of the cursor and the placement

span{
    background:#F8F8F8;
    border: 5px solid #DFDFDF;
    color: #717171;
    font-size: 13px;
    height: 150px;
    letter-spacing: 1px;
    line-height: 30px;
    position: relative;
    text-align: center;
    top: -10px;
    left:60px;
    display:none;
    padding:0 20px;

}
span:after{
    content:'';
    position:absolute;
    top:40px;
    right: 135px;
    width:10px;
    height:10px;
    border-bottom:5px solid #dfdfdf;
    border-right:5px solid #dfdfdf;
    background:#f8f8f8;
    margin-left:-10px;
    -moz-transform:rotate(135deg);
    -webkit-transform:rotate(135deg);
    transform:rotate(135deg);
}
p{
    margin:100px;
    float:left;
    position:relative;
    cursor:pointer;
}

p:hover span{
    display:block;
}

<p>Hover here<span>some text here ?</span></p>

Here is the [fiddle] (http://jsfiddle.net/beerbuddha/4kjnb4e5/)

I need a split 25%(header) with different background color and the rest (75%) to be a different color and to hold text and an image.

I tried the approach and what happens is that the display:none doesnt work anymore at all and the hover box it self break.

Im slightly lost.



Solution :

Very simple. You change html:

<div class="div-hover">Hover here
  <div class="div-tooltip">
    <div class="tooltip-header">some text here ?</div>
    <div class="tooltip-body">some text body some text body</div>
  </div>
</div>

Full code is here


    CSS Howto..

    How to not display css padding when span element is empty

    How to check if a css rule exists

    How can I implement dynamic styling for ion-list elements with AngularJS?

    how to create Hollow triangle in css [duplicate]

    How to keep css id to the 'li' in css

    How to customize bootstrap css when using bootstrap-sass [closed]

    How do I suppress errors in IntelliJ Idea 12

    how to decrease the height of content area for with css?

    How to fade in and fade out text on a timer using css animations

    Given an image button with borders how to stretch/repeat middle part in CSS for variable length content?

    How to fix image urls when processing css files with Gulp?

    How can I get a Select elements Options to “right-width” but leave the width of the Select itself unchanged?

    how to position subheader right under header [closed]

    How to use custom CSS with my Sharepoint WebPart?

    How to get css to work in Django [closed]

    How can I make height: “100%” work cross browser in CSS?

    Css how to set 3 block block/div's in one line [closed]

    How to correctly impose a background-color to a div wrapping article and aside in HTML/CSS?

    How to fit a big picture in a smaller space

    How to expand and collapse three div's side by side?

    How can design a full screen calendar view in Twitter Bootstrap?

    PHP Show Hidden Div

    CSS animation - How to fill in “starting from border”?

    How to get 2 CSS files to work together? - Problem with !important overriding rules

    How to create pentagon shape for avatar image?

    PHP: How to add a CSS text-align property to an already present inline style attribute of an element using simple_html_dom parser?

    how to dynamically change the property of css using jquery

    Bootstrap Icons not showing in published ASP.NET MVC application

    How to tell the code to choose between two variables and make them equal?

    How to combine the two same css selector into one?