오버레이 배경색 바꾸려면 어떻게 하나요

지도/로컬 API
#1

아래와 같이 이동 가능한 여러개의 오버레이를 만들었습니다.
function makeOverlay(oIdx,gubun,contents,latlng,latlng2,sw)
{
var content = document.createElement(‘div’);
content.innerHTML = contents;

// 커스텀 오버레이를 생성합니다
var customoverlay = new daum.maps.CustomOverlay({
	clickable:true,
	position: latlng2,
	content: content,
	zIndex: oIdx, 
	yAnchor: 0
});
customoverlay.setMap(map);

AryOverlay.push(customoverlay)

AryCustomoverlay.push(customoverlay)
AryCustomoverlayIDX.push(oIdx)

//오버레이 이동-----------------------------------------------------------------------------------------------
// 커스텀 오버레이에 mousedown이벤트를 등록합니다 
addEventHandle(content, 'mousedown', onMouseDown);

// mouseup 이벤트가 일어났을때 mousemove 이벤트를 제거하기 위해 document에 mouseup 이벤트를 등록합니다 
addEventHandle(document, 'mouseup', onMouseUp);

// 커스텀 오버레이에 mousedown 했을 때 호출되는 핸들러 입니다 
function onMouseDown(e) {   
}

// 커스텀 오버레이에 mousedown 한 상태에서 
// mousemove 하면 호출되는 핸들러 입니다 
function onMouseMove(e) {
}

// mouseup 했을 때 호출되는 핸들러 입니다 
function onMouseUp(e) {
}

// target node에 이벤트 핸들러를 등록하는 함수힙니다  
function addEventHandle(target, type, callback) {
	if (target.addEventListener) {
		target.addEventListener(type, callback);
	} else {
		target.attachEvent('on' + type, callback);
	}
}

// target node에 등록된 이벤트 핸들러를 제거하는 함수힙니다 
function removeEventHandle(target, type, callback) {
	if (target.removeEventListener) {
		target.removeEventListener(type, callback);
	} else {
		target.detachEvent('on' + type, callback);
	}
}

}

그리고 오버레이 내용에는 마우스오버 함수 selPriceTr() 가 있습니다.
구현하고 싶은건 지도 바깥에 있는 테이블의 행에서 마우스오버시에 테이블과 오버레이의 배경색을 바꾸고, 오버레이에서 마우스 오버시에도 동일한 동작을 하는것입니다.
그래서 selPriceTr()함수에서 해당 오버레이를 setContent를 해서 배경색을 바꿨는데 이렇게하니 기존에 동작하던 오버레이 이동이 안됩니다.

	customoverlay = AryCustomoverlay[IDX]
	content = customoverlay.getContent().innerHTML
	content = content.replace(oldCss,oldCss + " selected");
	customoverlay.setContent(content)

뭐가 문제인걸까요…

그리고 오버레이의 배경색을 바꾸기 위해서는 setContent를 하는 방법 밖에는 없나요?

#2

먼저 컨텐츠를 HTMLElement로 생성해주세요.
Dom 객체에 이벤트를 등록해주거나,
getContent() API로 받아온 Element에서 css 변경이 필요한 Dom 객체를 찾아
스타일이 선언된 클래스 추가 또는 css를 수정해주세요.

아래는 HTMLElement로 content를 생성하고 마우스 오버 이벤트를 걸어주는 방법입니다.

var content = document.createElement('div');
content.innerHTML =  data.title;
content.style.cssText = 'background: white; border: 1px solid black';

content.onmouseover = function() { // 마우스 오버 이벤트를 등록합니다.
    content.classList.add('black'); // element에 black 스타일이 선언된 클래스를 추가해줍니다.
}

overlay.setContent(content); // overlay의 컨텐츠를 지정합니다.