Question

我正在创建一个网站，希望用户能够将鼠标悬停在图像上并获取有关该图像的更多信息。我可以正常工作，但无法弄清楚如何使未选择的其他图像变暗。理想情况下，我想使用html和css创建一个与响应图像的尺寸完全匹配的overlay div。当未悬停在此叠加层div上时，div将使用透明颜色使图像稍微变暗。如何使该div对图像作出响应？

这是我的代笔看我在说什么 https://codepen.io/klaurtar/pen/NJgrOR

.overlay {
    width: 55%;
    position: absolute;
    background-color: rgba(0, 0, 0, .5);

    z-index: 10;

    &--p1 {
        left: 0;
        top: -2rem;
        height: 20rem;
    }

    &--p2 {
        right: 0;
        top: 2rem;
        height: 20rem;
    }

    &--p3 {
        left: 20%;
        top: 10rem;
        height: 22rem;
    }
}

Answer 1

global var_name

# Define Variables
import locale
locale.setlocale( locale.LC_ALL, '')

order_total = 0.0
price = 3.5
fmt_price = locale.currency(price, grouping=True)
qty = int(0)

# define the cookie list
cookie_list = list()
cookie_list = "Savannah Thin-Mints Tag-a-longs Peanut-Butter Sandwich".split()
order_list = list()

#----------------------------------------------------------------------
def disp_items():
    print("Please choose one of our flavours. Enter the item number to choose")

    for c in range(len(cookie_list)):
        print("{}. \t{}".format(c+1, cookie_list[c]))

    print()
#----------------------------------------------------------------------
def disp_menu():

    choice_list = ["a", "d", "m", "q"]

    while True:
        print("\nWhat would you like to do?")
        print("a = add an item")
        print("d = delete an item")
        print("m = display the meal so far")
        print("q = quit")
        choice = input("\nmake a selection> ")

        if choice in choice_list:
            return choice
        else:
            print("I dont't understand that entry. Please Try again.")
#----------------------------------------------------------------------
def calc_tot(qty):
    #this function is qty * price
    return qty * 3.5

#----------------------------------------------------------------------
def add_process():
    valid_data = False

    while not valid_data:
        disp_items()
        try:
            item = int(input("Enter item number> "))
            if 1 <= item <= len(cookie_list):
                valid_data = True
            else:
                print("\nThat was not a vaild choice, please try again.")
        except Exception as detail:
            print("error: ", detail)

    valid_data = False

    while not valid_data:

        try:

            qty = int(input("Enter Quantity: "))

            if 1 <= qty <= 10:
                valid_data = True
            else:
                print("\nThat was not a valid quantity, please try again.")

        except Exception as detail:
            print("Error; ", detail)
            print("Please try again")

    item_total = calc_tot(qty)
    fmt_total = locale.currency(item_total, grouping=True)

    print("\nYou choose: {} boxes of {} for a total of {}".format(qty, cookie_list[item-1], fmt_total))
    print()

    #verify inclusion of this item
    valid_data = False

    while not valid_data:
        incl = input("Would you like to add this to your order? (y/n)> ")
        print()
        if incl.lower() =="y":

            #2-D List
            inx = item - 1

            detail_list = [inx, qty]
            order_list.append(detail_list)

            valid_data = True
            print("{} was added to your order".format(cookie_list[inx]))

        elif incl.lower() == "n":
            print("{} was not added to your order".format(cookie_list[inx]))
            valid_data = True

        else:
            print("That was not a vaild response, please try again")
#----------------------------------------------------------------------
def del_item():
    if len(order_list) == 0:
        print("\n** You have no items in your order to delete **\n")
    else:
        print("\nDelete an Item")
        disp_order()

        valid_data = False
        while not valid_data:

            try:
                choice = int(input("Please enter the item number you would like to delete> "))
                if 1<= choice <= len(order_list):
                    choice = choice - 1
                    print("\nItem {}. {} with {} boxes will be deleted".format(choice +1, order_list[choice][0], order_list[choice][1]))
                    del order_list[choice]
                    valid_data = True
            except Exception as detail:
                print("Error: ", detail)
                print("Please try again")
#----------------------------------------------------------------------
def disp_order():
    print("\nGirl Scout Cookie Order for", cust)
    print()
    print("Itm\tName\tQty\tPrice")
    print("---\t----\t----\t----")
    tot_items = 0
    order_price = 0

    for c in range(len(order_list)):
        detail_list = [" ", 0]
        detail_list.append(order_list)
        print("{}.\t{}\t{}\t{}".format(c+1, cookie_list[c], order_list[c][1], price))
        tot_items += order_list[c][1]
        order_price += price

    print("\nYour Order Contains {} items for total of {} \n".format(tot_items, order_price))
    print("-" * 30)
#----------------------------------------------------------------------
# Banner

print("Welcome to the Girl Scout Cookie Order Program")

cust = input("enter your name> ")

while True:
    choice = disp_menu()
    if choice == "a":
        add_process()
    elif choice == "d":
        del_item()
    elif choice == "q":
        break

    disp_order()

disp_order()
print("Thank you for your order")

如何制作与图像尺寸完全匹配的div覆盖

1 个答案: