Member Avatar for aslittell

Is it possible to do the mouse over feature in HTML?

  • 3 Contributors
  • 5 Replies
  • 79 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by leahmarie

Dani AI

Generated

As asked about a "mouse over" effect, and as and pointed out, simple visual changes are handled best with CSS while interactive behavior (showing new content, loading data, navigation) requires JavaScript. A good, modern approach is to keep visuals in CSS (transforms/transitions) and add scripting only for behaviors that cannot be done with styles alone.

A practical, accessible pattern: make the visual effect with CSS transitions and ensure keyboard users get the same result via focus. The markup below keeps the container focusable so keyboard users see the overlay just like mouse users.

<div class="thumb" tabindex="0">
  <img src="photo.jpg" alt="Product name">
  <div class="overlay">More info</div>
</div>

.thumb { position:relative; display:inline-block; overflow:hidden; }
.thumb img { display:block; width:100%; transition:transform .25s ease; }
.thumb .overlay { position:absolute; left:0; right:0; bottom:0; padding:10px;
  background:rgba(0,0,0,.6); color:#fff; transform:translateY(100%);
  transition:transform .25s ease; }
.thumb:hover img, .thumb:focus-within img { transform:scale(1.05); }
.thumb:hover .overlay, .thumb:focus-within .overlay { transform:translateY(0); }

Notes: hover has no guaranteed meaning on touch devices — use the CSS hover media feature or JS toggles for touch (MDN :hover, MDN @media(hover)). For JS-driven interactions prefer mouseenter/mouseleave over mouseover/mouseout to avoid bubbling (MDN mouseenter). If an effect does not appear, check selector specificity, stacking context/overlapping elements, and whether pointer events are blocked by another element.

Recommended Answers

All 5 Replies

Member Avatar for almostbob

yes
________
Less smartass reply
yes, but
_________
Less smartass reply
yes, but only appearance, functions require some scripting, usually javascript
_________
reasonable reply

Yes, but only appearance, functions require some scripting language
example

<! doctype bla bla bla>
<html>
<head>
<style type='text/css'>
a { background:red; color:white; }
a:hover { background:white; color:red; }
</style>
</head>
<body>
<a href='#'>this is an ugly link</a>
</body>
</html>

available pseudo classes depending on which element being styled are

{blank}
link
hover
active
focus
first-line
first-letter
first-child
lang
visited
detailed explanations at http://www.w3schools.com/CSS/css_pseudo_classes.asp if($w3schools) { echo 'cool'; }

Edited by almostbob because: n/a
Member Avatar for aslittell

I don't understand that at all. Here is the website that I am trying to do the mouse-over on.

Member Avatar for almostbob

I answered your question, if you didnt want to know the 'generic 'answer, sorry, but thats the question asked

what mouseover effect do you want to achieve

the code to the site is better, between code tags, lets those who can implement what you want, point to where it goes

likely when it gets interesting there will be many more than just me playing sillybuggers with the code

Edited by happygeek because: fixed formatting
Member Avatar for aslittell

ok, thanks.

Member Avatar for leahmarie

Yes you could do that. Through CSS or javascript.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.