我在当天的各个班级的某些教室里都有这个课程表。每个表格单元格都包含类标题和教师姓名。
目标是拥有一个文本＆＃34;气球＆＃34;当光标悬停在类标题或教师姓名上时弹出。在前一种情况下，文本将是类描述，而后者是教师的生物。此材料将位于<div>设置为display: none的标记中。 目前，只有第一个细胞有这样的材料。
最终，我想让气球“漂浮”＃34;在页面上，＆＃34;附加＆＃34;到光标。它应该在鼠标输出课程名称或教师姓名时自行解雇。
通过将鼠标悬停在＆＃34; block＆＃34;上，可以看到我正在寻找的效果。在this page的第一段中。我在笔Popup Project Reduced Case处开发了一个简化案例。为方便起见，我已复制了以下所有代码。
我已经将JavaScript设置为弹出正确填充相应文本的气球。
但是在定位时，弹出窗口会将桌子的高度推向下方。这会移动光标悬停在光标下方的元素，从而实现无意识的鼠标移除。弹出窗口被删除，表格重新定位，元素返回光标，我们有鼠标悬停。弹出窗口弹出，桌面被推下，我们有一个鼠标输出，所以战争在两个事件之间进行。
那么我如何使用JavaScript定位弹出窗口，以便它可以＆＃34;浮动＆＃34;在桌子上方，而不是将自己插入桌子上方并推倒桌子？
/*
** JavaScript for Class Schedule popup project
*/
;
//// declare global variables ////
var nodeObject;
var popup;
//// main routine ////
nodeObject = document.getElementsByClassName("class-title");
addListeners(nodeObject);
nodeObject = document.getElementsByClassName("instructor");
addListeners(nodeObject);
//// define functions ////
function addListeners(nodeObject) {
var i;
for (i = 0; i < nodeObject.length; i++) {
nodeObject[i].addEventListener("mouseover", mouseoverElement);
nodeObject[i].addEventListener("mouseout", mouseoutFromElement);
} // end for
} // end fn addListeners
function populatePopup(popup, event) {
var popupHTMLTML;
// populate the popup <div>
popupHTML = event.target.nextSibling.nextSibling.innerHTML;
popup.classList.add("popup");
popup.style.display = "none";
popup.innerHTML = popupHTML;
return popup;
} // end fn populatePopup
function showPopup(popup, parentNode, targetNodeID) {
parentNode.insertBefore(popup, targetNodeID);
popup.style.display = "block";
} // end fn showPopup
function createElement(tag) {
var newElement;
newElement = document.createElement(tag);
return newElement;
} // end fn createElement
function mouseoverElement(event) {
popup = createElement('div');
popup = populatePopup(popup, event);
showPopup(popup, ScheduleWrapper, ScheduleTable);
} // end fn mouseoverElement
function mouseoutFromElement(event) {
ScheduleWrapper.removeChild(popup);
} // end fn mouseoutFromElement</code></pre>/* Class Schedule table */
.schedule-wrapper {} .schedule {
width: 100%;
table-layout: fixed;
border-spacing: 0;
margin: auto 0;
font-size: .8em;
}
.schedule p {
line-height: 1.2em;
}
.schedule th,
.schedule td {
border: solid tan 1px;
min-width: 250px;
text-align: left;
vertical-align: top;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
}
.schedule th {
text-align: center;
}
.schedule .header-row,
.schedule .header-col {
background-color: lightgrey;
text-align: center
}
.schedule .header-col {
padding-left: 5px;
padding-right: 5px;
vertical-align: middle;
max-width: 125px !important;
min-width: 100px !important;
}
.class-title {
padding: 5px;
font-size: 1.2em;
text-decoration: underline;
text-align: left;
color: blue;
}
.instructor {
padding: 5px;
padding-top: 8px;
font-size: 1em;
text-decoration: underline;
text-align: right;
color: blue;
}
.class-descrip,
.instructor-bio {
color: purple;
display: none;
}
.class-title:hover + .class-descrip,
.instructor:hover + .instructor-bio {
display: block;
}
.popup {
border: 2px solid #000;
border-radius: 10px;
width: 200px;
height: 250px;
overflow: auto;
background-color: rgba(0, 0, 0, .6);
color: #fff;
z-index: 1000;
}
@media only screen and (max-width: 1200px) {
.schedule-wrapper {
-webkit-overflow-scrolling: touch;
overflow-x: auto;
margin: 0 0;
}
.schedule {
width: auto;
}
.schedule th,
.schedule td {
max-width: 150px;
}
}<div id="ScheduleWrapper" class="schedule-wrapper">
<table id="ScheduleTable" class="schedule">
<thead>
<tr class="header-row">
<!--header row 1-->
<th scope="col" class="header-col">classroom</th>
<!--col 1-->
<th scope="col">A</th>
<!--col 2-->
<th scope="col">C</th>
<!--col 3-->
<th scope="col">D</th>
<!--col 4-->
<th scope="col">E</th>
<!--col 5-->
<th scope="col">F</th>
<!--col 6-->
<th scope="col">I</th>
<!--col 7-->
</tr>
<tr class="header-row">
<!--header row 2-->
<th scope="col" class="header-col">capacity</th>
<!--col 1-->
<th scope="col">30</th>
<!--col 2-->
<th scope="col">50</th>
<!--col 3-->
<th scope="col">100</th>
<!--col 4-->
<th scope="col">30</th>
<!--col 5-->
<th scope="col">50</th>
<!--col 6-->
<th scope="col">100</th>
<!--col 7-->
</tr>
</thead>
<tbody>
<tr>
<!--row 5-->
<th scope="row" class="header-col">9:30 - 10:30</th>
<!--header col 1, period 3-->
<td>
<p class="class-title">
Searching on Ancestry.com 2016 (Basic Search Ideas)
</p>
<div class="class-descrip">
<p>
Searching on Ancestry has changed drastically in 2016. Learn advanced syntax and searching strategies.
</p>
<p>This is some blah blah tet. This is some blah blah tet. This is some blah blah tet. This is some blah blah tet. This is some blah blah tet. This is some blah blah tet. This is some blah blah tet. This is some blah blah tet.
</p>
</div>
<p class="instructor">
Mindy McLane
</p>
<div class="instructor-bio">
<p>
Mindy McLane has taught courses at each of our conferences. She is particularly adept at all things Ancestry.
</p>
</div>
</td>
<!--col 2-->
<td>
<p class="class-title">
Land and Title Records
</p>
<div class="class-descrip">
<p>
</p>
</div>
<p class="instructor">
Nancy Feroe
</p>
<div class="instructor-bio">
<p>
</p>
</div>
</td>
<!--col 3-->
<td>
<p class="class-title">
Open Computer Lab
</p>
<div class="class-descrip">
<p>
</p>
</div>
<p class="instructor">
varying instructors
</p>
<div class="instructor-bio">
<p>
</p>
</div>
</td>
<!--col 4-->
<td>
<p class="class-title">
"Hey Dad! What did you do in the War?"
</p>
<div class="class-descrip">
<p>
</p>
</div>
<p class="instructor">
Jim Johnson
</p>
<div class="instructor-bio">
<p>
</p>
</div>
</td>
<!--col 5-->
<td>
<p class="class-title">
Thinking through your DNA results and figuring out what to do next.
</p>
<p class="instructor">
Dianne Gianninni Dianne Gianninni
<div class="instructor-bio">
<p>
</p>
</div>
</td>
<!--col 6-->
<td>
<p class="class-title" ">
Come Find Out What’s Available at the Family History Center in Springdale
</p>
<div class="class-descrip "><p>
</p>
</div>
<p class="instructor ">
Charlie Fowler
</p>
</div>
</td> <!--col 7-->
</tr>
</tbody>
</table>
</div>
答案 0 :(得分：3)
[...]我如何使用JavaScript定位弹出窗口，以便它能够＆＃34;浮动＆＃34;在桌子上方，而不是将自己插入桌子上方并将桌子向下推？
您将使用CSS 并为您的XDocument doc = XDocument.Parse("<Settings><Type>15</Type><Module>True</Module><Capacity>10</Capacity></Settings>");
var settings = doc
.Elements("Settings")
.Select(x => new Settings
{
Type = (int)x.Element("Type"),
Module = (bool)x.Element("Module"),
Capacity = (int)x.Element("Capacity"),
})
.ToList();
课程设置至少两（2）个以下属性：position: absolute。
top, right, bottom, left.popup/*
** JavaScript for Class Schedule popup project
*/
;
//// declare global variables ////
var nodeObject;
var popup;
//// main routine ////
nodeObject = document.getElementsByClassName("class-title");
addListeners(nodeObject);
nodeObject = document.getElementsByClassName("instructor");
addListeners(nodeObject);
//// define functions ////
function addListeners(nodeObject) {
var i;
for (i = 0; i < nodeObject.length; i++) {
nodeObject[i].addEventListener("mouseover", mouseoverElement);
nodeObject[i].addEventListener("mouseout", mouseoutFromElement);
} // end for
} // end fn addListeners
function populatePopup(popup, event) {
var popupHTMLTML;
// populate the popup <div>
popupHTML = event.target.nextSibling.nextSibling.innerHTML;
popup.classList.add("popup");
popup.style.display = "none";
popup.innerHTML = popupHTML;
return popup;
} // end fn populatePopup
function showPopup(popup, parentNode, targetNodeID) {
parentNode.insertBefore(popup, targetNodeID);
popup.style.display = "block";
// set these to whatever values you'd like to offset by
popup.style.top = 0;
popup.style.left = 0;
} // end fn showPopup
function createElement(tag) {
var newElement;
newElement = document.createElement(tag);
return newElement;
} // end fn createElement
function mouseoverElement(event) {
popup = createElement('div');
popup = populatePopup(popup, event);
showPopup(popup, ScheduleWrapper, ScheduleTable);
} // end fn mouseoverElement
function mouseoutFromElement(event) {
ScheduleWrapper.removeChild(popup);
} // end fn mouseoutFromElement</code></pre>