个人中心
gpt4 book ai didi

javascript - 如何让 onmouseover 和 onmouseout 设置按需要工作？

转载 作者：行者123 更新时间：2023-11-28 02:53:21 24 4
gpt4 key购买 nike

问题

我有一个在线商店的购物车，要查看购物袋中的内容，请将鼠标悬停在导航菜单中的一个 div 上。我制作了一个原型(prototype)，其中 shoppingTab div 实际上触及了导航栏中的 trolley div，使其在悬停时出现。然后，这允许我将光标从导航栏中的 shoppingTab div 移动到 trolley div，而购物车不会消失，直到 onmouseout奇怪的是只设置到导航栏中的 shoppingTab，而不是 trolley div 本身，但我喜欢这个奇怪的小怪癖。因此，我想将此行为复制到我的新网站上。

别担心:我知道到目前为止您所阅读的信息还不够，别担心，在我当前代码的下方有更详细的内容。当您进一步向下滚动时，您会明白我的意思 :)。

原型(prototype)代码

这是 JSFiddle 上的原型(prototype)(它不工作onmouseover？？？)https://jsfiddle.net/Please_Reply/k1k566wp/1/所以以防万一这里是原始代码，如果您将其复制并粘贴到空白 HTML 文件等中，它将起作用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.container{
    width:960px;
    margin:auto;
}
.header{
    width:960px;
    height:100px;
    background-color:#06F;
    float:left;
}
#trolley{
    width:150px;
    height:30px;
    background-color:white;
    float:right;
    border-radius:10px;
    color:black;
    border:1px solid black;
    line-height:30px;
    font-family:"Calibri";
    cursor: pointer;
}
.shop{
    width:960px;
    height:700px;
    background-color:white;
    float:left;
    font-family:"Calibri Light";
    padding:20px;
}
#shoppingTab{
    display:none;
    height:400px;
    width:400px;
    background-color:#CCC;
    color:black;
    position:relative;
    margin-top:1px;
    border-radius:10px;
    color:black;
    border:1px solid black;
    padding-left:10px;
    float:right;
}
html{
    background-color:#00F;
}
.product{
    height:200px;
    width:150px;
    float:left;
    border: 1px solid black;
    border-radius:10px;
    margin-right:20px;
    font-size:16px;
    text-align:center;
    cursor:pointer;
}
.product:hover{
    border:1px solid blue;
}
</style>
</head>

<body>
<div class="container">
    <div class="header">
        <span id="name"></span><div id="trolley" onmouseover="tabDisplay('block')" onmouseout="tabDisplay('none')"><center>Shopping Cart <span style='font-family:webdings'>&#164;</span> <span id="NOI" style="background-color:red; border-radius:360px; color:white; padding-left:5px;padding-right:5px">0</span></center>
            <div id="shoppingTab">You have selected <span id="NOI2">0</span> items. Your total is $<span id="totalPrice">0</span><br/><span id="itemsList"></span></div>
        </div>
    </div>
    <div class="shop" style="font-size:28px">Welcome, <span id="name2"></span>.<hr /><br/>Products<br/><hr />

    <div class="product" onclick="addToCart('sunglasses', 0, 70)">Pair of sunglasses ($70)<br /><br /><span onclick="change(1)">Click to add to cart</span></div>
    <div class="product" onclick="addToCart('shoes', 1, 180)">Pair of shoes ($180)<br /><br /><span onclick="change(3)">Click to add to cart</span></div>
    <div class="product" onclick="addToCart('belt', 2, 20)">A belt ($20)<br /><br /><span onclick="change(3)">Click to add to cart</span></div>
    </div>

</div>
</body>
</html>
<script>
var customerName = "";
var numberOfItems = 0;
var total = 0;
var items = [];
var stat = []

for(var a = 1; a <= 3; a++){
    stat[a] = false;
}

function update(){
    document.getElementById("NOI").innerHTML = numberOfItems;
    document.getElementById("NOI2").innerHTML = numberOfItems;
    document.getElementById("totalPrice").innerHTML = total;
    document.getElementById("itemsList").innerHTML = items.join("<br />");
}
function tabDisplay(displayStatus){
    shoppingTab.style.display = displayStatus;
}

function addToCart(productName, productID, price){
    items[productID] = productName;
    total += price;
    numberOfItems++;
    update();
}

function removeFromCart(productName, productID, price){
    items.splice(productID, 1);
    total -= price;
    if(stat[productID]){
    numberOfItems--;
    }
    update();
}

function change(i){
    if(stat[i] == false){
        stat[i] = true;
    }else{
        stat[i] = false;
    }
}

function setCookie(cname,cvalue,exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname+"="+cvalue+"; "+expires;
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

function checkCookie() {
    var user = getCookie("customer");
    if (user != "") {
        customerName = getCookie("customer");
        document.getElementById("name").innerHTML = customerName;
        alert("Welcome again, " + user + ".");
    } else {
        document.getElementById("name").innerHTML = "please set up an account";
       user = prompt("Please enter your name:","");
       if (user != "" && user != null) {
           setCookie("customer", user, 30);
           document.getElementById("name").innerHTML = user;
       }
    }
}

function changeCookie(){
    var user = getCookie("customer");
    user = prompt("Please enter your name:","");
       if (user != "" && user != null) {
           setCookie("customer", user, 30);
       }
       document.getElementById("name").innerHTML = user;
}
checkCookie();
</script>

我当前的代码

我有一个当前代码的 JSFiddle(它不起作用，所以我也复制了下面的代码。我认为这是因为我有纯 Javascript，它试图将其读取为 JQuery？？？我不知道不知道...无论如何，如果您无法修复 JSFiddle，只需复制 JSFiddle 链接下方实际工作的代码)...https://jsfiddle.net/Please_Reply/9uwj2bed/2/

基本上，在下面的代码中，当您将鼠标悬停在 shopcartbar div 上时，我需要 shoppingCart div 出现(可能使用 onmouseover ).但就 onmouseout 而言，我希望能够将鼠标悬停在 shoppingCart div 上而不会消失。我希望 onmouseout 在 shopcartbar div 和 shoppingCart div 上工作，就像它在我的原型(prototype)中一样？？？

当我在 shoppingCart div 上使用 onmouseover 时，还有一个问题是，当我将鼠标悬停在shoppingCart div，它们似乎触发了 onmouseout，这也不是我想要的，它们是 shoppingCart div 的一部分。

<head>
<style>
body{ /* Applies to the <body> tag */
    margin:0px; /* Sets the margin on all sides to 0px */
}
.container{ /* The container class */
    width:100%; /* This sets the width */
    height:100%; /* This sets the height */
    background-color:white; /* Sets the background colour */
    font-family:"Myriad Pro"; /* Sets the font family */
}
.header{ /* The header class */
    width:100%;
    background-color:blue;
    color:white; /* The sets the colour of the font */
}
div{
    display: inline-block; /* Sets the display type */
    float:left; /* Sets the float position */
}
#one, #two, #three, #four{
    background-color:black;
    height:90px;
    color:white;
    text-align:center;
    font-size:25px;
}
#slider{
    background-color:blue;
    height:10px;
    width:100px;
    position: absolute; /* Sets the position to a specific type */
    left: 0; /* Sets the number of pixels from the left that this object is placed */
    bottom:0; /* Sets the number of pixels from the bottom that this object is placed */
}
.inside{
    margin-left:30px; /* Specifies the margin from the left side */
    margin-right:30px; /* Specifies the margin from the right side */
    padding-top:7px; /* Specifies the padding from the top side */
    pointer-events:none; /* Specifies the cursor events */
    margin-top:25px; /* Specifies the margin from the top side */
}
#shoppingTab{
    display:none;
    height:670px;
    width:400px;
    background-color:white;
    color:black;
    position:relative;
    margin-top:-2px;
    border-radius:10px;
    color:black;
    border:1px solid #323232;
    padding:10px;
    float:right;
    z-index:50;
}
.smallProduct{
    height:50px;
    width:390px;
    float:left;
    border: 2px solid black;
    border-radius:10px;
    font-size:16px;
    cursor:pointer;
    margin-bottom:10px;
    overflow:hidden;
}
.smallProduct:hover{
    border:2px solid blue;
}
</style>
</head>
<body>
<div class="container"> <!-- This is the container -->


<div class="header"> <!-- This is the header -->
        <div style="float:left"> <!-- This is the logo -->
            <img src="logo.png" height="120px"/>
        </div>
        <div style="float:right; font-family:'Myriad Pro'; background-image:url(images/loginsignupbar.png); width:535.1px; height:30px">
            <div onmouseover="tabDisplay('block')" id="shopcartbar" style="float:right; font-size:24px; margin-top:-7px">
            <img src="images/shoppingCart.png" height="30px"/>&nbsp;Shopping Cart (<span id="numberOfItems">0</span>)&nbsp;
            </div>
            <div id="shoppingTab" onmouseout="tabDisplay('none')">
            Shopping Cart<br />
                <div class="smallProduct" style="margin-top:5px" id="thmbproduct0"></div>
                <div class="smallProduct" id="thmbproduct1"></div>
                <div class="smallProduct" id="thmbproduct2"></div>
                <div class="smallProduct" id="thmbproduct3"></div>
                <div class="smallProduct" id="thmbproduct4"></div>
                <div class="smallProduct" id="thmbproduct5"></div>
                <div class="smallProduct" id="thmbproduct6"></div>
                <div class="smallProduct" id="thmbproduct7"></div>
                <div class="smallProduct" id="thmbproduct8"></div>
                Total: $<span id="totalPrice">00</span>.00
            </div>
            <span id="topnavbar" style="float:right; font-size:24px; margin-top:5.5px">
            </span>
        </div>
        <div style="float:right; clear:right"> <!-- This is the navigation menu -->
            <div style="position:relative"> <!-- This is the container of the navigation menu -->
                <div id="slider"></div> <!-- This is the slider bar -->
                <a href="link.html"><div id="one" class="item"><div class="inside">Button 1</div></div></a> <!-- This is just one of the buttons -->
                <a href="link2.html"><div id="two" class="item"><div class="inside">Button 2</div></div></a>
                <a href="link3.html"><div id="three" class="item"><div class="inside">Button 3</div></div></a>
                <a href="link4.html"><div id="four" class="item"><div class="inside">Button 4</div></div></a>
            </div>
        </div>
    </div>

</div>
</body>
</html>
<script>
function tabDisplay(displayStatus){
    shoppingTab.style.display = displayStatus;
}
</script>
<script type="text/javascript" src="./jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function() {
  $("#slider").animate({
    "left": $('#three').position().left + "px",
    "width": $('#three').width() + "px"
  }, 0);

  $(".item").hover(function() {
    $("#slider").stop();
    $("#slider").animate({
      "left": $(this).position().left + "px",
      "width": $(this).width() + "px"
    }, 500);
  });

  $(".item").on("mouseout", function() {
    $("#slider").stop();
    $("#slider").animate({
      "left": $('#three').position().left + "px",
      "width": $('#three').width() + "px"
    }, 500);
  });
});
</script>

最佳答案

尝试替换此部分:

function tabDisplay(displayStatus){
    shoppingTab.style.display = displayStatus;
}

有了这个:

$( "#shopcartbar, #shoppingTab" ).mouseenter(function() {
 $("#shoppingTab").show();
})
.mouseleave(function() {
  $("#shoppingTab").hide();
});

关于javascript - 如何让 onmouseover 和 onmouseout 设置按需要工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38333319/

24 4 0
文章推荐： javascript - rails : best way to test an action called remotely?
文章推荐： html - CKEditor 样式列表样式
文章推荐： css - 如何使用CSS3改变图像的颜色？
文章推荐： html - Jasper 到 html 背景图像拉伸(stretch)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com