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

    border: 5px solid #DFDFDF;
    color: #717171;
    font-size: 13px;
    height: 150px;
    letter-spacing: 1px;
    line-height: 30px;
    position: relative;
    text-align: center;
    top: -10px;
    padding:0 20px;

    right: 135px;
    border-bottom:5px solid #dfdfdf;
    border-right:5px solid #dfdfdf;

p:hover span{

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

Here is the [fiddle] (

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>

Full code is here

    CSS Howto..

    Nine divs in columns. How to design this?

    how to stretch an image in background css property

    How do I apply CSS styling to a

    How to implement multi piece page background that is behind a content background in HTML/CSS without Javascript?

    How to Resize Unicode Characters via CSS

    Any idea how to add this sinking hover effect to an image/link?

    How do you create boxes like github's explore section?

    How to make possible vertical scroll on popup and disable vertical scroll for page by using CSS?

    How to fix text with limited height and absolute position overflows

    I would like to have the users change the CSS using an optional panel. How should I do this? [closed]

    How to increase spacing between dt tags

    dynamic drop down how to show success using css (tic icon)

    How to position an image sprite at the bottom of an element of unknown height

    How to add a class to select_tag in Ruby on Rails

    How to generate CSS color in proportion to value?

    How to get next elements before a specific element using jquery or css

    How to convert 6 digit color code to 3 digit quickly in css file?

    How do you create and run an html page directly from LocalStorage?

    views_slideshow controls modification Drupal 7

    HTML table show last column using media queries

    Button element styled with CSS is not showing the background-image in IE6

    how to give css for following data

    How to visually indicate current page in ASP.NET MVC?

    Show image in a div tag with it's real size using jquery/css/html

    Position relative, how to get rid of dead space?

    How to show CSS transitions only on hover?

    How do I center and auto-resize this css loader?

    How put div element to bottom of another div element

    How to fix each column in Table? [closed]

    CSS3: How to add more than 2 CSS Ribbon effects to same banner?