javascript - How to highlight on mouseover without wiping out select control -

in openlayers trying highlight features of vector layer cursor moves on them. can make work.

i'm trying make features selectable , have popup box when they're clicked. works too.

what cant make work both of them @ same time. hoverselect seems overide popup select. i've based code on http://dev.openlayers.org/releases/openlayers-2.11/examples/highlight-feature.html few differences. know why hover select , select can't coexist?

select = new openlayers.control.selectfeature(vector_layer, {clickout: true});          vector_layer.events.on({             "featureselected": onfeatureselect,             "featureunselected": onfeatureunselect         });         map.addcontrol(select);         select.activate();          select.handlers['feature'].stopdown = false;          select.handlers['feature'].stopup = false;  //removed overrode select selecthover = new openlayers.control.selectfeature(vector_layer, {hover: true});  function onpopupclose(event) {     select.unselectall(); }  function onfeatureselect(event) {         var feature = event.feature;         var content = "<p>"+feature.attributes.sheet.value + "</p>" + feature.attributes.description;         if (content.search("<script") != -1) {             content = "content contained javascript! escaped content below.<br>" + content.replace(/</g, "&lt;");         }         popup = new openlayers.popup.framedcloud("chicken",                                   feature.geometry.getbounds().getcenterlonlat(),                                  new openlayers.size(100,100),                                  content,                                  null, true, onpopupclose);         feature.popup = popup;         map.addpopup(popup); }    function onfeatureunselect(event) {         var feature = event.feature;         if(feature.popup) {             map.removepopup(feature.popup);             feature.popup.destroy();             delete feature.popup;         } }  var info = function(evt) {             openlayers.console.log(evt.type, evt.feature.id);         };  //removed of overode select var highlight = new openlayers.control.selectfeature(vector_layer, { //                hover: true, //                highlightonly: true, //                renderintent: "temporary", //                eventlisteners: { //                    beforefeaturehighlighted: info , //                    featurehighlighted: info , //                    featureunhighlighted: info  //                } //            }); //map.addcontrol(highlight); //highlight.activate();  var vector_style_d = new openlayers.style({     'fillcolor': '#669933',     'fillopacity': .5,     'strokecolor': '#aaee77',     'strokewidth': 3,     'cursor': 'pointer' })  var vector_style_s = new openlayers.style({     'fillcolor': '#fe2e2e',     'fillopacity': .8,     'strokecolor': '#aaee47',     'strokewidth': 4,     'cursor': 'pointer' })  var vector_style_t = new openlayers.style({     'fillcolor': '#fe2e2e',     'fillopacity': .8,     'strokecolor': '#aaee47',     'strokewidth': 3,     'cursor': 'pointer' })  var vector_style_map = new openlayers.stylemap({     'default': vector_style_d,     'select': vector_style_s,     'temporary': vector_style_t, });  vector_layer.stylemap = vector_style_map; 

i had same problem, looking @ example provided @ ol page (http://openlayers.org/dev/examples/highlight-feature.html) did trick me, change order in constructors of both controls invoked (it should hover first, select).

cheers