Div不会重新定位并出现在.mouseover上

时间：2015-01-18 11:45:40

标签： jquery html css

尝试将一些信息框（.kontaktbox，.delovnicasbox）移动并在我将鼠标悬停在页脚（.kontakt，.delovnicas）中时显示。我希望它们出现在鼠标指针旁边，然后当鼠标不再徘徊时再次消失（这就是为什么我使用.mouseover / .mouseout）。我的功能不起作用，不知道为什么。任何建议/帮助表示赞赏。

＆＃13;
＆＃13; 
var mouseX;
var mouseY;
$(document).mousemove(function(e) {
  mouseX = e.pageX;
  mouseY = e.pageY;
});
$(".kontakt").mouseover(function() {
  $('.kontaktbox').css({
    'top': mouseY,
    'left': mouseX
  }).fadeIn('slow');
});
$(".kontakt").mouseout(function() {
  $('.kontaktbox').fadeOut('slow');
});
$(".delovnicas").mouseover(function() {
  $('.delovnicasbox').css({
    'top': mouseY,
    'left': mouseX
  }).fadeIn('slow');
});
$(".delovnicas").mouseout(function() {
  $('.delovnicasbox').fadeOut('slow');
});
＆＃13; 
body {
  /*ozadje strani*/
  background-image: url("images/background_test.jpg");
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: 50% 0%;
  margin-top: 5%;
  /*krčenje strani*/
  min-width: 49.5em;
  font-family: verdana;
  color: #000000;
}
/*splošno linki*/

a:link {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
  font-weight: bold;
}
a:active {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
/*velikost celotne vsebine*/

.layout {
  width: 70%;
  margin-left: 15%;
  margin-right: 15%;
}
.bannerlayout {
  text-align: center;
}
#ijs_logo {
  display: inline-block;
}
#headersign {
  display: inline-block;
  vertical-align: top;
  font-weight: bolder;
  font-size: 200%;
}
.topmenulayout {
  text-align: center;
}
#topmenu {
  width: 100%;
  display: inline-block;
  background-color: #330033;
  border-radius: 10px;
  opacity: 0.7;
}
.menutext {
  display: inline-block;
}
#linkijs {
  float: left;
  margin-left: 5%;
  color: #ffffff;
}
#linkeng {
  float: right;
  margin-right: 5%;
  color: #ffffff;
}
.content {
  height: 100%;
}
/*container za linkboxe*/

#linkpanel {
  display: inline-block;
  float: left;
  ;
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.linkboxdivider {
  margin: 0;
  padding: 0;
  width: 38em;
  height: 18em;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.5em;
}
.linkbox {
  /*linkbox positinoning*/
  margin-left: 0.5em;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: auto;
  display: inline-block;
  /*style*/
  background-color: #ffcc99;
  padding: 1%;
  width: 17em;
  height: 17em;
  opacity: 0.7;
}
#novosti {
  border-radius: 30px 30px 0px 30px;
}
#knjižnica {
  border-radius: 30px 30px 30px 0px;
}
#čitalnica {
  border-radius: 30px 0px 30px 30px;
}
#servisi {
  border-radius: 0px 30px 30px 30px;
}
.linkboxtitle {
  font-weight: bold;
  font-size: 120%;
  margin-left: 5%;
}
.linkboxlink {
  color: #000000;
  margin-left: 5%;
}
.footerlayout {
  text-align: center;
}
.footer {
  width: 100%;
  display: inline-block;
  background-color: #330033;
  border-radius: 10px;
  opacity: 0.7;
}
.kontakt {
  float: left;
  margin-left: 5%;
  display: inline-block;
  color: #ffffff;
}
.delovnicas {
  float: right;
  margin-right: 5%;
  display: inline-block;
  color: #ffffff;
}
/*napis pod footerjem*/

.underfooter {
  width: 100%;
  padding: 0;
  font-size: 90%;
}
#copyright {
  float: left;
  margin-left: 5%;
  display: inline-block;
  padding: 0;
  margin-top: 0;
}
#adminmail {
  vertical-align: top;
  float: right;
  margin-right: 5%;
  display: inline-block;
  padding: 0;
  margin-top: 0;
}
#adminmaillink {
  color: #000000;
  padding: 0;
  margin-top: 0;
}
.delovnicasbox {
  background-color: #ffcc99;
  padding: 1%;
  opacity: 0.7;
  border-radius: 30px;
  border: 1px solid black;
  display: none;
  width: 12em;
}
.kontaktbox {
  background-color: #ffcc99;
  padding: 1%;
  opacity: 0.7;
  border-radius: 30px;
  border: 1px solid black;
  display: none;
  width: 12em;
}
＆＃13; 
<html>

<head>
  <title>Domača stran znanstveno informacijskega centra</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link type="text/css" rel="stylesheet" href="defsi.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="magic.js"></script>
</head>

<body>
  <table class="layout">
    <tr class="bannerlayout">
      <td>
        <img id="logo" src="images/ijs_logo.gif" alt="IJSlogo" />
        <p id="headersign">ZNANSTVENO INFORMACIJSKI CENTER</p>
      </td>
    </tr>
    <tr class="topmenulayout">
      <td>
        <div id="topmenu">
          <a href="http://www.ijs.si/">
            <p class="menutext" id="linkijs">IJS</p>
          </a>
          <a href="indexEN.html">
            <p class="menutext" id="linkeng">ENGLISH</p>
          </a>
        </div>
      </td>
    </tr>
    <tr class="content">
      <td>
        <div id="linkpanel">
          <div class='linkboxdivider'>
            <div class="linkbox" id="novosti">
              <p class="linkboxtitle">NOVOSTI</p>
              <a href="http://greyhound.ijs.si:13795/Scripts/Allsi.asp">
                <p class="linkboxlink">e-knjige založbe Springer</p>
              </a>
              <a href="http://greyhound.ijs.si:13782/Scripts/Titsi.asp">
                <p class="linkboxlink">nove elektronske revije</p>
              </a>
              <a href="http://greyhound.ijs.si:13784/Defsi.asp">
                <p class="linkboxlink">novi izvodi tiskanih revij</p>
              </a>
              <a href="http://www.sciencemag.org/archive">
                <p class="linkboxlink">Science Classic</p>
              </a>
            </div>
            <div class="linkbox" id="knjižnica">
              <p class="linkboxtitle">KNJIŽNICA</p>
              <a href="http://greyhound.ijs.si:13786/Defsi.asp">
                <p class="linkboxlink">predstavitev</p>
              </a>
              <a href="http://www.cobiss.si/scripts/cobiss?ukaz=getid&amp;sblk=c&amp;lani=si&amp;bno=50108">
                <p class="linkboxlink">COBISS</p>
              </a>
              <a href="mailto:illijs@ijs.si">
                <p class="linkboxlink">medknjižnična izposoja</p>
              </a>
              <a href="http://splet02.izum.si/cobiss/BibPersonal.jsp?init=t">
                <p class="linkboxlink">bibliografije raziskovalcev</p>
              </a>
            </div>
          </div>
          <div class='linkboxdivider'>
            <div class="linkbox" id="čitalnica">
              <p class="linkboxtitle">ČITALNICA</p>
              <a href="http://greyhound.ijs.si:13782/Scripts/Titsi.asp">
                <p class=linkboxlink>elektronske revije</p>
              </a>
              <p class="linkboxlink">CD ROM-i</p>
            </div>
            <div class="linkbox" id="servisi">
              <p class="linkboxtitle">SERVISI</p>
              <a href="http://greyhound.ijs.si:13790/Defsi.asp">
                <p class=linkboxlink>splošno zanimivi</p>
              </a>
              <a href="http://greyhound.ijs.si:13787/Defsi.asp">
                <p class=linkboxlink>samo za lokalne uporabnike</p>
              </a>
            </div>
          </div>
        </div>
      </td>
    </tr>
    <tr class="footerlayout">
      <td>
        <div class="footer">
          <p class="kontakt">kontakt</p>
          <p class="delovnicas">delovni čas</p>
        </div>
      </td>
    </tr>
    <tr class="underfooter">
      <td>
        <p id="copyright">© ZIC IJS. Vse pravice pridržane.</p>
        <p id="adminmail">spletni mojster:<a id="adminmaillink" href="mailto:anton.verbovsek@ijs.si"> av</a>
        </p>
      </td>
    </tr>
  </table>
  <div class="delovnicasbox">
    <p>pon.-čet.: 8:00-17:30
      <br>pet.: 8:00-17:00</p>
  </div>
  <div class="kontaktbox">
    <p>Institut Jožef Stefan
      <br>Knjižnica
      <br>Jamova 39
      <br>1000 LJUBLJANA
      <br>
      <br>tel: +386 1 47 73 304
      <br>fax: +386 1 47 73 152
      <br>
    </p>
  </div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

您使用错误的选择器id="kontakt"，但在jQuery中，您使用$(".kontakt")与CLASS

而不是mouseover和mouseout使用更好的mouseenter和mouseleave（或简称为.hover()方法）

您的jQuery也可以是：

<强> jsBin demo 

var ttip;

$(document).mousemove(function(ev){
  ttip.css({left:ev.pageX, top:ev.pageY});
});

$("#kontakt").hover(function() {
  ttip = $('.kontaktbox').stop().fadeToggle();
});
$(".delovnicas").hover(function() {
  ttip = $('.delovnicasbox').stop().fadeToggle();
});

您只需要在工具提示中设置CSS position属性即可移动它们！

.delovnicasbox, .kontaktbox {
  position:absolute;
}

答案 1 :(得分：0)

您必须更改javascript中的选择器，它现在正在运行，请检查完整页面中的代码段。 你还要更好地设置你的#kontaktbox css样式，我已经给出了一个绝对的位置，以便在页面上显示它。你可以更改它的值来显示它。

var mouseX;
var mouseY;
$(document).mousemove(function(e) {
  mouseX = e.pageX;
  mouseY = e.pageY;
});
$("#kontakt").mouseover(function() {
  $('.kontaktbox').css({
    'top': mouseY,
    'left': mouseX
  }).fadeIn('slow');
});
$("#kontakt").mouseout(function() {
  $('.kontaktbox').fadeOut('slow');
});
$(".delovnicas").mouseover(function() {
  $('.delovnicasbox').css({
    'top': mouseY,
    'left': mouseX
  }).fadeIn('slow');
});
$(".delovnicas").mouseout(function() {
  $('.delovnicasbox').fadeOut('slow');
});
body {
  /*ozadje strani*/
  background-image: url("images/background_test.jpg");
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: 50% 0%;
  margin-top: 5%;
  /*krčenje strani*/
  min-width: 49.5em;
  font-family: verdana;
  color: #000000;
}
/*splošno linki*/

a:link {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
  font-weight: bold;
}
a:active {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
/*velikost celotne vsebine*/

.layout {
  width: 70%;
  margin-left: 15%;
  margin-right: 15%;
}
.bannerlayout {
  text-align: center;
}
#ijs_logo {
  display: inline-block;
}
#headersign {
  display: inline-block;
  vertical-align: top;
  font-weight: bolder;
  font-size: 200%;
}
.topmenulayout {
  text-align: center;
}
#topmenu {
  width: 100%;
  display: inline-block;
  background-color: #330033;
  border-radius: 10px;
  opacity: 0.7;
}
.menutext {
  display: inline-block;
}
#linkijs {
  float: left;
  margin-left: 5%;
  color: #ffffff;
}
#linkeng {
  float: right;
  margin-right: 5%;
  color: #ffffff;
}
.content {
  height: 100%;
}
/*container za linkboxe*/

#linkpanel {
  display: inline-block;
  float: left;
  ;
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.linkboxdivider {
  margin: 0;
  padding: 0;
  width: 38em;
  height: 18em;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.5em;
}
.linkbox {
  /*linkbox positinoning*/
  margin-left: 0.5em;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: auto;
  display: inline-block;
  /*style*/
  background-color: #ffcc99;
  padding: 1%;
  width: 17em;
  height: 17em;
  opacity: 0.7;
}
#novosti {
  border-radius: 30px 30px 0px 30px;
}
#knjižnica {
  border-radius: 30px 30px 30px 0px;
}
#čitalnica {
  border-radius: 30px 0px 30px 30px;
}
#servisi {
  border-radius: 0px 30px 30px 30px;
}
.linkboxtitle {
  font-weight: bold;
  font-size: 120%;
  margin-left: 5%;
}
.linkboxlink {
  color: #000000;
  margin-left: 5%;
}
.footerlayout {
  text-align: center;
}
.footer {
  width: 100%;
  display: inline-block;
  background-color: #330033;
  border-radius: 10px;
  opacity: 0.7;
}
#kontakt {
  float: left;
  margin-left: 5%;
  display: inline-block;
  color: #ffffff;
}
#delovnicas {
  float: right;
  margin-right: 5%;
  display: inline-block;
  color: #ffffff;
}
/*napis pod footerjem*/

.underfooter {
  width: 100%;
  padding: 0;
  font-size: 90%;
}
#copyright {
  float: left;
  margin-left: 5%;
  display: inline-block;
  padding: 0;
  margin-top: 0;
}
#adminmail {
  vertical-align: top;
  float: right;
  margin-right: 5%;
  display: inline-block;
  padding: 0;
  margin-top: 0;
}
#adminmaillink {
  color: #000000;
  padding: 0;
  margin-top: 0;
}
.delovnicasbox {
  background-color: #ffcc99;
  padding: 1%;
  opacity: 0.7;
  border-radius: 30px;
  border: 1px solid black;
  display: none;
  width: 12em;
}
.kontaktbox {
  background-color: #ffcc99;
  position: absolute;
  bottom: 0;
  padding: 1%;
  opacity: 0.7;
  border-radius: 30px;
  border: 1px solid black;
  display: none;
  width: 12em;
}
<html>

<head>
  <title>Domača stran znanstveno informacijskega centra</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link type="text/css" rel="stylesheet" href="defsi.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="magic.js"></script>
</head>

<body>
  <table class="layout">
    <tr class="bannerlayout">
      <td>
        <img id="logo" src="images/ijs_logo.gif" alt="IJSlogo" />
        <p id="headersign">ZNANSTVENO INFORMACIJSKI CENTER</p>
      </td>
    </tr>
    <tr class="topmenulayout">
      <td>
        <div id="topmenu">
          <a href="http://www.ijs.si/">
            <p class="menutext" id="linkijs">IJS</p>
          </a>
          <a href="indexEN.html">
            <p class="menutext" id="linkeng">ENGLISH</p>
          </a>
        </div>
      </td>
    </tr>
    <tr class="content">
      <td>
        <div id="linkpanel">
          <div class='linkboxdivider'>
            <div class="linkbox" id="novosti">
              <p class="linkboxtitle">NOVOSTI</p>
              <a href="http://greyhound.ijs.si:13795/Scripts/Allsi.asp">
                <p class="linkboxlink">e-knjige založbe Springer</p>
              </a>
              <a href="http://greyhound.ijs.si:13782/Scripts/Titsi.asp">
                <p class="linkboxlink">nove elektronske revije</p>
              </a>
              <a href="http://greyhound.ijs.si:13784/Defsi.asp">
                <p class="linkboxlink">novi izvodi tiskanih revij</p>
              </a>
              <a href="http://www.sciencemag.org/archive">
                <p class="linkboxlink">Science Classic</p>
              </a>
            </div>
            <div class="linkbox" id="knjižnica">
              <p class="linkboxtitle">KNJIŽNICA</p>
              <a href="http://greyhound.ijs.si:13786/Defsi.asp">
                <p class="linkboxlink">predstavitev</p>
              </a>
              <a href="http://www.cobiss.si/scripts/cobiss?ukaz=getid&amp;sblk=c&amp;lani=si&amp;bno=50108">
                <p class="linkboxlink">COBISS</p>
              </a>
              <a href="mailto:illijs@ijs.si">
                <p class="linkboxlink">medknjižnična izposoja</p>
              </a>
              <a href="http://splet02.izum.si/cobiss/BibPersonal.jsp?init=t">
                <p class="linkboxlink">bibliografije raziskovalcev</p>
              </a>
            </div>
          </div>
          <div class='linkboxdivider'>
            <div class="linkbox" id="čitalnica">
              <p class="linkboxtitle">ČITALNICA</p>
              <a href="http://greyhound.ijs.si:13782/Scripts/Titsi.asp">
                <p class=linkboxlink>elektronske revije</p>
              </a>
              <p class="linkboxlink">CD ROM-i</p>
            </div>
            <div class="linkbox" id="servisi">
              <p class="linkboxtitle">SERVISI</p>
              <a href="http://greyhound.ijs.si:13790/Defsi.asp">
                <p class=linkboxlink>splošno zanimivi</p>
              </a>
              <a href="http://greyhound.ijs.si:13787/Defsi.asp">
                <p class=linkboxlink>samo za lokalne uporabnike</p>
              </a>
            </div>
          </div>
        </div>
      </td>
    </tr>
    <tr class="footerlayout">
      <td>
        <div class="footer">
          <p id="kontakt">kontakt</p>
          <p id="delovnicas">delovni čas</p>
        </div>
      </td>
    </tr>
    <tr class="underfooter">
      <td>
        <p id="copyright">© ZIC IJS. Vse pravice pridržane.</p>
        <p id="adminmail">spletni mojster:<a id="adminmaillink" href="mailto:anton.verbovsek@ijs.si"> av</a>
        </p>
      </td>
    </tr>
  </table>
  <div class="delovnicasbox">
    <p>pon.-čet.: 8:00-17:30
      <br>pet.: 8:00-17:00</p>
  </div>
  <div class="kontaktbox">
    <p>Institut Jožef Stefan
      <br>Knjižnica
      <br>Jamova 39
      <br>1000 LJUBLJANA
      <br>
      <br>tel: +386 1 47 73 304
      <br>fax: +386 1 47 73 152
      <br>
    </p>
  </div>
</body>

</html>

相关问题
最新问题