Exploring a new CSS concept!

One interesting approach is to utilize transition-delay; http://jsfiddle.net/nAg7W/

div img {
    position:absolute;
    opacity:0;
    transition:0s 180s;
}
div:hover img {
    opacity:1;
    transition:0s;
}
div {
    line-height:1.2em;
    font-size:1em;
    color:black;
    transition:0s 180s;
}
div:hover {
    line-height:0;
    font-size:0;
    color:transparent;
    transition:0;
}

Here's the markup:

<div>some text to hover to see an image which is hidden as you read this
<img src="http://placehold.it/200x200&text=zi image" />

You could also make it disappear on click. http://jsfiddle.net/nAg7W/1/

div:hover img:focus {/* includes tabindex in html tag for img */
   opacity:0;
   transition:3s;
   -webkit-transform:rotate(-360deg) scale(0.23);
   -webkit-transform:rotate(-360deg) scale(0.23);
   -moz-transform:rotate(-360deg) scale(0.23);
   -o-transform:rotate(-360deg) scale(0.23);
   -ms-transform:rotate(-360deg) scale(0.23);
   transform:rotate(-360deg) scale(0.23);
}

According to @Leo Pflug, implementing CSS and HTML on and after click can be done confidently using the techniques outlined in this resource.

By incorporating a bit of JavaScript, achieving this effect is not only possible but also straightforward and reliable, as demonstrated by @Wind Shear.

However, accomplishing Pure CSS on and after hover is significantly more challenging and may not be currently feasible for production due to browser compatibility issues. Modifying elements with the :hover pseudo-class selector poses limitations when dealing with elements that are no longer being hovered over.

The most viable approach using pure CSS would involve CSS3 Animations. As an example, I have developed a demonstration here (v2 w/FF & IE) utilizing CSS animations to transition to a hover state upon hovering and maintaining that state until the page is refreshed.

@keyframes hover {
  0% {
    // normal styles
  }
  100% {
    // hover styles
  }
}

.class {
  animation-name: hover;
  animation-duration: 1ms;
  animation-fill-mode: backwards;
  animation-play-state: paused;      
}

.class:active,
.class:focus,
.class:hover {
  animation-fill-mode: forwards;
  animation-play-state: running;
}

I conducted tests in Chrome latest, Firefox latest, and IE 10, and it functioned correctly on all three browsers.

Please note that there were display issues on CodePen with the latest code updates, so I have included a fresh link here.

For additional information on stopping CSS3 animations at specific frames, refer to this post and this thread.

UPDATE: Lea Verou has recently showcased this technique in her article titled Smooth state animations with animation-play-state.

Hover state in CSS is not a permanent solution as it only dictates the styling rules for various elements. To maintain a hover state indefinitely, Javascript is required.

Personally, I am a big advocate of using the jQuery library. Hence, here's my approach to tackle this issue.

Styling with CSS

ul li ul {
    display: none;
}
ul li.permahover ul {
    display: block;
}

Implementing Javascript with jQuery

$("#onabout").one("mouseover", function() {
  $("#onabout").addClass('permahover');
});

The one event binds a handler to an event that will execute only once per element.

Check out the Demo

http://jsfiddle.net/jlratwil/w83BW/

To achieve this functionality, JavaScript is required. By utilizing jQuery, you can effectively update the style permanently in this manner:

$(#onabout).onmouseover().css("display","block");

Unique CSS Concept

Exploring the idea of creating a "stay visible" effect using pure CSS can lead to various approaches with potential unintended consequences. Achieving a purely permanent solution might require implementing JavaScript, as suggested by others.

Extended Visibility But Not Permanence

If your goal is to keep an element visible while hovering over another specific area, a simple adjustment like the following in your code could work:

#about:hover #onabout,
#onabout:hover {
   display: block;
}

Sustained Visibility Approach

An alternative method involves encasing the #onabout element within a wrapper with a fixed position that reveals itself upon hover. By setting this wrapper to cover all sides of the screen and employing its :hover state to maintain visibility of #onabout, you may achieve a more persistent effect. However, this approach may interfere with other interactions on the page. Consider customizing this idea based on your specific project needs. The code snippet for this technique would look something like this:

#permaHoverWrap {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   display: none;
}

#about:hover #permaHoverWrap,
#permaHoverWrap:hover {
   display: block;
}

In this scenario, the visibility of #onabout is maintained through the fixed wrapper's display property toggled via hover interaction. While this concept demonstrates a CSS-only solution, it may have adverse effects depending on the context. Experiment with caution to determine its suitability for your application.

One effective solution involves manipulating classes on an element, which can be achieved using JQUERY.

#about {
height: 25px;
width: 84px;
background-image: url('about.png');
position: absolute;
top: 200px;
left: 0px;
}

#onabout {
height: 200px;
width: 940px;
position: absolute;
top: 60px;
left: 0px;
color: #fff;
font-family: 'Lato', sans-serif;
font-size: 15px;
font-weight: 300;
display: none;
}

#about.hover #onabout {
display: block;
}

It's worth noting the change from :hover to .hover (Class Name) in the code.

$("#about").hover(function(){
   $(this).addClass("hover");
});

It's unlikely that you can achieve this effect using only CSS and the :hover selector. One alternative is to use a click event instead. By changing the code so that the user has to click on the div, you can make the other one appear permanently.

<style>
.onabout
{
    display: none;
}

input#activate
{
    display: none;
}

input#activate:checked + .onabout
{
    display: block;
}
</style>

<label for="activate">
    <div class="about">Click me</div>
</label>
<input id="activate" type="checkbox"></input>
<div class="onabout">Visible while checkbox:checked true or Radiobutton:checked true</div>

If you want the ability to hide the element by clicking again, you can use a checkbox. Alternatively, if you prefer the element to stay visible until another option is clicked, consider using a radio input type.

To solve this issue, it seems that utilizing CSS animation with an eternal delay could be beneficial. Take a look at the following article for more information...

Just stumbled upon the solution to your query. Check out the sample css code below:

.Main_title {
margin-top: 20px;
margin-left: 15px;
font-family: 'Open Sans';
font-size: 14pt;
color: #4E7AA1;
transition: 800ms 2s;
}

or

.Subtitle_text {
margin-top: 6px;
width: 200px;
margin-left: 20px;
font-family: 'Open Sans';
font-size: 10pt;
color: #8C6239;
position: relative;
top: -25px;
left: -180px;
opacity: 0;
transition: opacity 3s 2s, left 800ms 2s, top 1.5s 2s;
}

The second value in the transition attribute functions as a delay parameter. This means that your hover effects will persist for the specified duration before returning to their original state (e.g., transition: 800ms 2s; - In this case, the hover effect will remain active for 2 seconds after you move your cursor away).

Hope this clears things up.

S.D.R

Forget about Javascript – CSS is all you need to achieve this effect. Here's a way to implement it using CSS without any scripting:

(Remember, visibility is the key here instead of display)

.menu-wrapper .dropdown-content {
  display: inline-flex;
  transition: all 0s ease 1s; /*delay 1s*/
  visibility: hidden;
}
.menu-wrapper:hover .dropdown-content {
  transition-delay: 0s;
  visibility: visible;
}

Check out this jQuery trick that allows a second level menu item to display its child third level contents when hovered over, and maintains visibility until another second level item is selected.

 $("ul.second > li.dropdown").hover(function() {
    // Remove the 'show' class if it's already applied
    $('ul.third').removeClass('show');
    // Apply the 'show' class only to the child of this element
    $(this).find('.third').addClass('show');
  });

Try replacing this:

#section:hover #onsection {
 display: block;
}

Insert the following line:

#onsection:hover {
 display: block;
}

Your updated code should look like this:

#section:hover #onsection,
#onsection:hover {
 display: block;
}

Ensure that no margin is added in the process.