<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<select id="option_page">
<option value="page1.html">page1</option>
<option value="page1.html">page2</option>
</select>
<br><br>
<iframe id="mark_frame" src="page1.html"></iframe>
<script>
$('#option_page').change(function() {
$('#mark_frame').prop("src", this.value);
});
$('#mark_frame').mouseover(function(e) {
if (e.target.children.length == 0) {
$(e.target).css({
border: "1px solid blue",
cursor: "pointer"
});
}
});
$('#mark_frame').mouseout(function(e) {
$(e.target).css({
border: "none"
});
});
</script>
</body>
</html>