Member Avatar for navi17

Hello friends,

Well i just realized onmouseover on select options not working in IE/Chrome/safari.
i think bec. IE/chorme doesnot support onmouseover.

Can any one tell me the alternative of onmouseover?


Thanks

  • 5 Contributors
  • 9 Replies
  • 2K Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by sharga

Dani AI

Generated

you ran into a long-standing platform limitation. Native <select> dropdowns do not reliably expose per-<option> hover/mouse events across browsers; the only portable events you can count on are fired by the <select> itself (e.g., change/input). That is why your inline onmouseover works in Firefox but not elsewhere. In practice, you either update the preview on change, or replace the dropdown UI with a custom, hoverable list that mirrors the <select> value. See MDN on <select> events and the historical limitations of styling/scripting <option> elements. MDN: select MDN: option (legacy styling limits)

If you truly need a hover preview for each pet, keep the real <select> for form submission, but render a parallel list next to it and sync the value. Minimal example:

<select id="pets">
  <option value="dog" data-img="/img/dog.jpg">Dog</option>
  <option value="bird" data-img="/img/bird.jpg">Bird</option>
  <!-- ... -->
</select>
<div id="petPreview"></div>

<script>
const sel = document.querySelector('#pets');
const preview = document.querySelector('#petPreview');
const list = document.createElement('ul');
list.setAttribute('role', 'listbox'); // accessibility hint

[...sel.options].forEach(opt => {
  const li = document.createElement('li');
  li.setAttribute('role', 'option');
  li.textContent = opt.textContent;
  li.dataset.value = opt.value;
  li.dataset.img = opt.dataset.img || '';
  li.addEventListener('mouseenter', () => {
    preview.innerHTML = li.dataset.img ? '<img alt="" src="'+li.dataset.img+'">' : '';
  });
  li.addEventListener('click', () => {
    sel.value = li.dataset.value;
    sel.dispatchEvent(new Event('change', { bubbles: true }));
  });
  list.appendChild(li);
});

sel.insertAdjacentElement('afterend', list);
sel.style.position = 'absolute'; sel.style.left = '-9999px'; // keep native select for forms
</script>

For production, add keyboard behavior and proper ARIA (combobox/listbox) so it is accessible, as @diafol suggested moving away from inline JS. MDN: combobox role MDN: listbox role

Recommended Answers

All 9 Replies

Member Avatar for Member #46692

I think using .css is the way to go here.

Is it a text link or image link you are using?

Member Avatar for karthik_ppts

onmouseover works on all browsers. Where you need on mouse over? please post your code..

Member Avatar for navi17 
<select>
<option onmouseover="showtrail();">Dog</option>
<option onmouseover="showtrail();">Bird</option>
</select>

Above is the sample code. onmouseover only works in Firefox but in other browsers it does not work. i think bec. other browsers doesn't support onmouseover in select options.


Thanks

Member Avatar for Member #120589

Could you use :hover in css or is the js a little more complicated than showing an image or something?

IE does support onmouseover, but not on <option> (so I believe).

Personally, I'd use an event handler as opposed to using inline js.

If using jQuery:

I came across this earlier.

Go to the thread item that starts: "I had a slighty different problem..."

http://stackoverflow.com/questions/206997/jquery-javascript-ie-hover-doesnt-cover-select-box-options

Member Avatar for navi17

I need to show an image when ever i hover on option.
right now onmouseover only work in firefox.


Any idea how it will work?

Member Avatar for Member #120589

So use a CSS :hover. You can use descendents or classnames to trigger this or if there are too many, perhaps js is your way out. Did you read the article in the link I supplied?

Member Avatar for navi17

yes i have read. but did not understand completely.
I have lots of pet in select.
now what i want to achieve when i hover on every pet. the image of each pet is shown in nearby div. i am achieving this by ajax using onmouseever in option.
but now onmousever only works in firefoxs. its not working in other browsers.
so i think i need to use some jquery for this.

Can you give me the working code here?

Thanks

Edited by navi17 because: n/a
Member Avatar for Member #120589

I think I already did in the link.

1. get jquery (google cdn link is best) in the <head>
2. give options a value as a hook for JS. <option value="blah">...</option>
3. write an event handler, either in the head, at the bottom of the page or in an ext js file with similar code to what you saw in the link I supplied.

If you get stuck with js/jQuery, go to that forum for help.

After all, this is A PHP FORUM.

Edited by Member #120589 because: n/a
Member Avatar for sharga

onmouseover and titles both works on chrome but only when you give a size to the select box bigger then 2,but this way you will have not a dropdown menu but a list of options

<select size="3">
<option>.....

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.